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. FZU 1649 Prime number or not米勒拉宾大素数判定方法。

    C - Prime number or not Time Limit:2000MS     Memory Limit:32768KB     64bit IO Format:%I64d & % ...

  2. 【Other】推荐点好听的钢琴曲

    2013-12-13 16:19 匿名 | 浏览 138977 次 音乐钢琴 推荐点好听的钢琴曲,纯音乐也可以thanks!!! 2013-12-14 19:34 网友采纳 热心网友 巴洛克:帕海贝尔 ...

  3. java面试总结-(hibernate ibatis struts2 spring)

    说说Hibernate对象的三种状态 Hibernate对象有三种状态,分别是:临时态(Transient). 持久态(Persistent).游离态(Detached). 临时状态:是指从对象通过n ...

  4. table动态添加删除一行和改变标题

    <style type="text/css"> body{ font-size:13px; line-height:25px; } table{ border-top: ...

  5. #define 的一些用法 以及 迭代器的 [] 与 find()函数的区别

    #include "stdafx.h" #include <map> #include <string> #include <iostream> ...

  6. liunx下安装MYSQL时需要安装的相关软件的作用

    2013年11月16日 14:18:39 This installs the package for MySQL server (mysql-community-server) and also pa ...

  7. （转）SQL Server 中WITH (NOLOCK)浅析

    概念介绍 开发人员喜欢在SQL脚本中使用WITH(NOLOCK), WITH(NOLOCK)其实是表提示(table_hint)中的一种.它等同于 READUNCOMMITTED . 具体的功能作用如 ...

  8. Python -- BeautifulSoup的学习使用

    BeautifulSoup4.3 的使用 下载和安装 # 下载 http://www.crummy.com/software/BeautifulSoup/bs4/download/ # 解压后 使用r ...

  9. 【贪心】最大乘积-贪心-高精度-java

    问题 G: [贪心]最大乘积 时间限制: 1 Sec  内存限制: 128 MB提交: 34  解决: 10[提交][状态][讨论版] 题目描述  一个正整数一般可以分为几个互不相同的自然数的和,如3 ...

  10. [Android Pro] 监听WIFI 打开广播

    <uses-permission android:name="android.permission.ACCESS_WIFI_STATE"/> <uses-perm ...