box-shadow 属性向框添加一个或多个阴影。这个CSS3的属性很常用，盒阴影、按钮状态等各种地方都有用到，但是你了解并记住各个参数的作用及用法吗？

展示

源码：http://codepen.io/yisi/pen/sDBwC

语法：http://www.w3cplus.com/content/css3-box-shadow

动图：

使用技巧

 
1
box-shadow: h-shadow v-shadow blur spread color inset;

第一个值控制水平偏移，正值向右，负值向左

第二个值控制垂直偏移，正值向下，负值向上

第三个值控制模糊半径，不允许负值，数值越大阴影的边缘越模糊

第四个值控制扩展范围

最后一个值控制阴影颜色，省略则继承color 属性的颜色

可以添加多个阴影，用逗号隔开

可以使用inset设置内阴影

你会了吗？

CSS3 box-shadow快速教程的更多相关文章

  1. 给深度学习入门者的Python快速教程 - 番外篇之Python-OpenCV

    这次博客园的排版彻底残了..高清版请移步: https://zhuanlan.zhihu.com/p/24425116 本篇是前面两篇教程: 给深度学习入门者的Python快速教程 - 基础篇 给深度 ...

  2. Python快速教程 尾声

    作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 写了将近两年的Python快速教程,终于大概成形.这一系列文章,包括Python基 ...

  3. 【Python大系】Python快速教程

    感谢原作者:Vamei 出处:http://www.cnblogs.com/vamei 怎么能快速地掌握Python?这是和朋友闲聊时谈起的问题. Python包含的内容很多,加上各种标准库.拓展库, ...

  4. 10个实用的 CSS3 按钮效果制作教程

    人们往往喜欢那些有更多互动元素的网站,因此现在很多设计师专注于他们的 CSS3 技能.这是因为 CSS3 技能可以帮助他们在很大的程度上实现所需的吸引力.这里分享的10个优秀的 CSS3 按钮效果制作 ...

  5. 给深度学习入门者的Python快速教程 - numpy和Matplotlib篇

    始终无法有效把word排版好的粘贴过来,排版更佳版本请见知乎文章: https://zhuanlan.zhihu.com/p/24309547 实在搞不定博客园的排版,排版更佳的版本在: 给深度学习入 ...

  6. Python快速教程目录（转）

    作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 怎么能快速地掌握Python?这是和朋友闲聊时谈起的问题. Python包含的内容 ...

  7. Python快速教程 尾声(转)

    原文地址: http://www.cnblogs.com/vamei/p/3603046.html 作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留 ...

  8. 发布《Linux工具快速教程》

    发布<Linux工具快速教程> 阶段性的完成了这本书开源书籍,发布出来给有需要的朋友,同时也欢迎更多的朋友加入进来,完善这本书: 本书Github地址:https://github.com ...

  9. Python快速教程

    作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 怎么能快速地掌握Python?这是和朋友闲聊时谈起的问题. Python包含的内容 ...

  10. AFNnetworking快速教程，官方入门教程译

    AFNnetworking快速教程,官方入门教程译 分类: IOS2013-12-15 20:29 12489人阅读 评论(5) 收藏 举报 afnetworkingjsonios入门教程快速教程 A ...

随机推荐

  1. HDU 2895 编辑距离

    #include<stdio.h> #include<iostream> #include<string.h> #include<algorithm> ...

  2. 《ASP.NET1200例》解决母版页报错“内容控件必须是内容页中的顶级控件，或是引用母版页的嵌套母版页。”

    VS2005下,添加了母版页这个控件,我们可以讲N个页面中共同的部分放在母版页来实现,并让WEB窗体集成自我们的母版页,就可以让我们的站点具有统一的风格了.在VS2005SP1之前的版本中,我们只能创 ...

  3. makefile中的自动化变量$@,$%,$

    转自:http://www.2cto.com/os/201302/191344.html   makefile中的自动化变量$@,$%,$   自动化变量  模式规则中,规则的目标和依赖文件名代表了一 ...

  4. 【转】Linux Shell脚本调试技术

    本文转载自:https://www.ibm.com/developerworks/cn/linux/l-cn-shell-debug/ Shell脚本调试技术 本文全面系统地介绍了shell脚本调试技 ...

  5. UML 序列图一点理解

    激活状态,就是长方形该画到哪里呢?我的理解是,一个长方形代表调用函数的执行过程,比如下图 这个长方形就表示viewDidAppear()函数没有执行完,在这个长方形上发出或者收到的消息都是在 view ...

  6. Greedy:Fence Repair（POJ 3252）

    Fence Repair 问题大意:农夫约翰为了修理栅栏,要将一块很长的木块切割成N块,准备切成的木板的长度为L1,L2...LN,未切割前的木板的长度恰好为切割后木板的长度的总和,每次切断木板的时候 ...

  7. oracle的数据库，随笔

    不多说,看代码 select b.*,a.kscj,a.paiming from (select t.kch,t.kcm,t.kscj,t.xh,        rank() over (order ...

  8. CodeForces - 427B (模拟题)

    Prison Transfer Time Limit: 1000MS   Memory Limit: 262144KB   64bit IO Format: %I64d & %I64u Sub ...

  9. POJ 3904 Sky Code (容斥原理)

    B - Sky Code Time Limit:1000MS     Memory Limit:65536KB     64bit IO Format:%I64d & %I64u Submit ...

  10. 使用Memory Analyzer tool(MAT)分析内存泄漏（二）

    转载自:http://www.blogjava.net/rosen/archive/2010/06/13/323522.html 前言的前言 写blog就是好,在大前提下可以想说什么写什么,不像投稿那 ...