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. [POJ1007]DNA Sorting

    [POJ1007]DNA Sorting 试题描述 One measure of ``unsortedness'' in a sequence is the number of pairs of en ...

  2. POJ 2492 并查集扩展（判断同性恋问题）

    G - A Bug's Life Time Limit:10000MS     Memory Limit:65536KB     64bit IO Format:%I64d & %I64u S ...

  3. 架设基于StrongSwan的L2tp/IPSec VPN服务器

    架设基于StrongSwan的L2tp/IPSec VPN服务器 参考: http://agit8.turbulent.ca/bwp/2011/01/setting-up-a-vpn-server-w ...

  4. N-Queens | & N-Queens II

    The n-queens puzzle is the problem of placing n queens on an n×n chessboard such that no two queens ...

  5. iOS NSURLConnection 和 dispatch_async 错误的使用方法，导致回调方法无法调用

    dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, ), ^{ NSMutableURLRequest ...

  6. Java内存分配和内存管理

    首先是概念层面的几个问题: Java中运行时内存结构有哪几种? Java中为什么要设计堆栈分离? Java多线程中是如何实现数据共享的? Java反射的基础是什么? 然后是运用层面: 引用类型变量和对 ...

  7. SL4A

    参考文章:http://my.oschina.net/u/1468102/blog/208687 如何安装使用SL4A http://www.ibm.com/developerworks/cn/mob ...

  8. mysql忘记密码修改方法

    1.干掉mysqld进程 kill -TERM mysqld 2.使用下面命令启动mysqld /usr/bin/mysqld_safe --skip-grant-tables & 3.新开一 ...

  9. IOS项目自动构建

    # Sets the target folders and the final framework product. # 如果工程名称和Framework的Target名称不一样的话,要自定义FMKN ...

  10. DbHelper-SQL数据库访问助手

    using System; using System.Data; using System.Data.SqlClient; namespace Whir.Software.Framework.Ulti ...