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. ubuntu 12.04 server编译安装nginx

    tar -xvf zlib-1.2.8.tar.gz cd zlib-1.2.8 ./config make make install above is for zlib(refers http:// ...

  2. kettle作业中的js如何写日志文件

    在kettle作业中JavaScript脚本有时候也扮演非常重要的角色,此时我们希望有一些日志记录.下面是job中JavaScript记录日志的方式. job的js写日志的方法. 得到日志输出实例 o ...

  3. Ubuntu 13.04安装搜狗输入法

    Ubuntu 13.04安装搜狗输入法 [日期:2013-07-08] 来源:Linux公社  作者:LinuxIDC.com [字体:大 中 小]     目标:在Ubuntu 13.04以及基于U ...

  4. css样式，层叠顺序属性z-index

    在做项目的时候,居然单击后显示的顺序一直被别的li标签压着,最后终于找到了,是css的z-index属性赋值了,值越大,显示的层就越高 详情推荐百度百科:z-index z-index是针对网页显示中 ...

  5. JavaScript、Jquery选择题

    尚学堂Java EE软件工程师认证考试 试题库-选择题     一.    选择题(包括单选和双选) 1.B 在JavaScript中,以下变量命名非法的是(   )(选择一项) A. numb_1 ...

  6. cjb

    输入216.194.70.6 ,进入到是cjb.net的主页,并不是shell.cjb.net ,进入主页后点击shell,就进不去了 分析:shell.cjb.net被DNS污染了 解法:hosts ...

  7. .hpp与.h的区别

    本文转载http://blog.csdn.net/liuzhanchen1987/article/details/7270005,在此感谢 hpp,其实质就是将.cpp的实现代码混入.h头文件当中,定 ...

  8. ubuntu 14.04安装mysql server & mysql client

    $ sudo apt-get install mysql-server

  9. ava.net.SocketException: Unrecognized Windows Sockets error: 0: JVM_Bind （解决思路）

    当我们在启动tomcat服务的时候报错信息:java.net.SocketException: Unrecognized Windows Sockets error: 0: JVM_Bin 分析:从错 ...

  10. hdu 1012:u Calculate e（数学题，水题）

    u Calculate e Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Tot ...