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. Java报错原因汇总

    1. java.lang.nullpointerexception 这个异常大家肯定都经常遇到,异常的解释是"程序 遇上了空指针",简单地说就是调用了未经初始化的对象或者是不存在的 ...

  2. PHP网页数据正则采集

    $url ="https://********"; $contents = file_get_contents($url); //抓取页面数据 //如果出现中文乱码使用下面代码 / ...

  3. Bellman-Ford算法

    #include<stdio.h> #define max 0xffffff ][]; //图的邻接矩阵 ]; int n;//顶点个数 int m;//边个数 struct Edge { ...

  4. ZOJ 2315

    ---恢复内容开始--- http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=1315 这个题目比较难以看懂,我也是看网上的题目意思才 ...

  5. jquery优势

    1.轻量 2.开源 3.选择器出色 可以支持几乎 css1到css3 的所有选择器 4.简单的修改页面    不同的浏览器对于css的支持程度是不同的,jquery通过封装javascript的代码, ...

  6. 【转】SQL中内连接和外连接

    如表     -------------------------------------------------     table1 | table2 |     ----------------- ...

  7. iOS 转载一篇日期处理文章

    感谢原作者的辛勤付出,由于时间太久,记不住原来的地址了,如果你是原作者,请联系我,我会添加原文连接,谢谢! iOS处理时间的类主要包括NSDate,NSDateFormatter, NSDateCom ...

  8. (转)JAVA AJAX教程第一章-初始AJAX

    既然是认识AJAX,理论和实践相结合,这样让自己学的更快,理解更深入,我分一下几点: 1.  认识传统的同步交互方式和AJAX解决方案 2.  AJAX使用到的技术 3.  实例体验AJAX 一.同步 ...

  9. 读取STL模型

    读取二进制格式的STL模型文件 std::ifstream fin;fin.open(stlFilePath, std::ios::in | std::ios::binary);bool isBina ...

  10. ligureUI 刷新列求和

    dataGrid=$("#dataGrid").ligerGrid({ columns: [ {display:, align:'left' }, {display:, align ...