语法

box-shadow:X轴偏移量 y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]

参数介绍：

注：inset 可以写在参数的第一个或最后一个，其它位置是无效的。

　　阴影模糊半径，其值只能为正值，值越大阴影边缘就越模糊，值为0时阴影不具有模糊效果。

　　阴影扩展半径，其值可以为正负值，值为正，阴影扩大，值为负，阴影缩小

用法

外阴影: box-shadow: 0px 0px 12px 5px #33CC00;

内阴影：box-shadow:0px 0px 12px 5px #33CC00 inset ;

当外阴影设置了偏移量：box-shadow:5px 4px 6px  #666;

当内阴影设置了偏移量：box-shadow:5px 5px 5px #666 inset;

只设置X,Y偏移量：box-shadow:10px 10px  #666;

在上个基础上加阴影模糊半径和阴影扩展半径：box-shadow:10px 10px 5px 10px #666;

多个阴影： box-shadow:4px 2px 6px #f00, -4px -2px 6px #000, 0px 0px 12px 5px #33CC00 inset;

css3阴影 box-shadow的更多相关文章

  1. CSS3阴影 box-shadow的使用和技巧总结

    text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果.随着html5和CSS3的普及,这一特殊效果使用越来越普遍. 基本语法是{box-shadow:[inset ...

  2. 【转】 CSS3阴影 box-shadow的使用和技巧总结

    text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果.随着html5和CSS3的普及,这一特殊效果使用越来越普遍. 基本语法是{box-shadow:[inset ...

  3. CSS3阴影 box-shadow的使用

      text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果.随着html5和CSS3的普及,这一特殊效果使用越来越普遍. 基本语法是{box-shadow:[ins ...

  4. CSS3阴影 box-shadow的使用总结

    text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果.随着html5和CSS3的普及,这一特殊效果使用越来越普遍. 基本语法是{box-shadow:[inset ...

  5. OpenGL阴影，Shadow Volumes（附源程序，使用 VCGlib ）

    实验平台:Win7,VS2010 先上结果截图:    本文是我前一篇博客:OpenGL阴影,Shadow Mapping(附源程序)的下篇,描述两个最常用的阴影技术中的第二个,Shadow Volu ...

  6. OpenGL阴影，Shadow Mapping（附源程序）

    实验平台:Win7,VS2010 先上结果截图(文章最后下载程序,解压后直接运行BIN文件夹下的EXE程序): 本文描述图形学的两个最常用的阴影技术之一,Shadow Mapping方法(另一种是Sh ...

  7. OpenGL 阴影之Shadow Mapping和Shadow Volumes

    先说下开发环境.VS2013,C++空项目,引用glut,glew.glut包含基本窗口操作,免去我们自己新建win32窗口一些操作.glew使我们能使用最新opengl的API,因winodw本身只 ...

  8. 阴影锥(shadow volume)原理与展望

    转记:找了不少关于shadow volume原理的资料,还是这个帖子讲解的一目了然,转帖在这里,方便查阅.引用链接:http://blog.donews.com/yyh/archive/2005/05 ...

  9. CSS3 Flex Box（弹性盒子）

    CSS3 Flex Box(弹性盒子) 一.简介 弹性盒子是 CSS3 的一种新的布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及 ...

  10. 分享div、text、Box Shadow(阴影)演示及代码的页面

    附图: 直接上链接:www.css88.com/tool/css3Preview/Box-Shadow.html

随机推荐

  1. grep常用选项记录

    grep: 一.常用选项:    -i 不区分大小写针对单个字符    -v 显示不包括查找字符的所有行    -o 只打印出匹配到的字符    -c 显示有多少行被匹配到    -e 可以使用多个表 ...

  2. my15_ mysql binlog格式从mixed修改为row格式

    由于主库繁忙,就在从库上修改binlog格式 1. 从库切日志mysql> flush logs;Query OK, 0 rows affected (0.00 sec) mysql> f ...

  3. numpy初用

    import numpy as np for k,v in stat.iteritems():     print k     v.sort()     #v = v[len(v)*3/100:len ...

  4. HTML_DOM学习

    HTML DOM 树 通过ID/类名/标号可以定位HTML元素,然后可用JS改变这些元素的样式内容,并对DOM事件作出反应 对HTML事件的响应: onmousedown 和onmouseup/onc ...

  5. [编程题] 小易喜欢的数列 dp

    https://www.nowcoder.com/question/next?pid=6291726&qid=112729&tid=12736753 [编程题] 小易喜欢的数列 时间限 ...

  6. Kudu 常见的几个应用场景

    不多说,直接上干货! Kudu 常见的几个应用场景 实时更新的应用.刚刚到达的数据就马上要被终端用户使用访问到. 时间序列相关的应用,需要同时支持: 根据海量历史数据查询. 必须非常快地返回关于单个实 ...

  7. 在线编辑word文档 可保存到服务器

    使用说明:该方法只在office xp 和 2003上 测试通过,2000及以下 版本没试. 注意:你要打开的服务器端的word文档要有写权限.iis要开起 web服务扩展中的webdav为允许 具体 ...

  8. 11.C#中的转义符和@符号的作用

    转义符 转义符是指一个'\'+一个特殊的字符,组成的一个具有特殊意义的字符. \n:  表示换行. namespace _11.转义符 { class Program { static void Ma ...

  9. 【踩坑】报错 non-static method xxx() cannot be referenced from a static context

    今天测试代码时遇到 Error:(6, 55) java: non-static method sayGoodbye() cannot be referenced from a static cont ...

  10. Hibernate课程 初探一对多映射4-3 测试--信息查询

    建立双向一对多关系,既可以由一方查询多方信息,同样可以由多方查询一方信息 demo: //查询学生所在班级 public static void showGidByStudent(){ Session ...