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. VS(VisualStudio)中折叠代码、打开代码的快捷键

    CTRL + M, CTRL + O折叠代码定义 CTRL + M, CTRL + L展开代码定义

  2. Java 23种设计模式

    转自: http://zz563143188.iteye.com/blog/1847029 ; i<count; i++){ list.add(new MailSender()); } } pu ...

  3. BZOJ 1452 [JSOI2009] Count

    这道题好像有点简单的样子... absi找题目好厉害啊...确实是一道比较裸的2dBIT啊. 水掉吧. 附:2dBIT怎么做: 2dBIT就是BIT套BIT啦. 所以修改loop(x+=lowbit( ...

  4. html css js

    html 回顾 字体:font 属性: color: 颜色 size: 字号 表格:table 标签: tr:表格中的行 td: 单元行中的单元格 th:通常使用在table中的第一行, 成为表头, ...

  5. IOS多线程（NSThread）

    1.创建方法 使用NSThread创建线程主要有两个个方法,分别如下 NSThread* myThread = [[NSThread alloc] initWithTarget:self   sele ...

  6. JS Replace 全部替换字符 用法

    转载自:http://www.cnblogs.com/skykang/archive/2011/08/04/2127158.html <script language="javascr ...

  7. MFC RadioButton

    添加一组RadioButton 多个radio button,IDC_RADIO1,IDC_RADIO2,IDC_RADIO3 ..将IDC_RADIO1的Group属性选择上,其他不要选Group属 ...

  8. RGB888->RGB565->RGB888

     转自CB的博客:http://blog.chinaaet.com/detail/28298 在我们的计算机中,图像是以RGB888显示的,24位图每个像素保存了32bit的数据,即RGB888+Al ...

  9. 修改stb_image.c以让Duilib直接支持Ico格式的图标显示

    duilib不支持ico格式的图标资源, 但是我要想显示ico格式的图标... 发现网上那些转换ico为bmp或其它格式的都不是一个好办法, 也还是不能让duilib直接显示ico... 昨晚稍微研究 ...

  10. Emacs简易教程

    Emacs简易教程阅读: 命令: $emacs 进入之后,输入: C-h t 这里,C-h表示按住[Ctrl]键的同时按h ####### 20090620 *退出: 输入“C-x C-c” *撤销: ...