语法

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. Typora中给代码块设置快捷键

    Tpyore中大部分的操作都是有快捷键的.但是有那么几个常用的却没有快捷键.就比如代码块,这个常用的操作,还有有序无需列表. 下边教会你怎么设置快捷键,打开设置,Preferences[偏好设置],然 ...

  2. 进入BIOS的步骤

    查看自己的BIOS版本 $ systeminfo 对号入座,电脑进入BIOS的两种实用方法

  3. Android Studio CMake依赖第三方库

    这里实现一个简单的功能在APP里调用libnative-lib.so里的add.libnative-lib.so去调用libthird.so里的third_add来实现 JniUtil public ...

  4. thinkphp3.2 删除Runtime目录里的缓存文件,标记一下,以下好找。

    操作如下: utility::clearCache("Data"); 或 utility::clearCache("Data-Logs"); class uti ...

  5. 如何使用python将二维数组去重呢?

    二维数组的去重,能和一维的方法类似吗?import numpyc=np.array(((1,2),(3,4),(5,6),(7,8),(7,8),(3,4),(1,2)))print('二维数组:\n ...

  6. 测试阿里云1核2g轻量级服务器的吞吐量

    使用jmeter对部署的dbshop发起请求,单线程5000次请求 面板为宝塔界面 吞吐量大概在每秒48个请求左右.可以看出阿里云1核2g服务器其实并不能进行实战,只是新手练手而已. 阿里云另一种ec ...

  7. javascript document.referrer 用法

    document对象的referrer属性,返回导航到当前网页的超链接所在网页的URL. 举例: 1. a.html文件内容如下: <a href="b.html">浏 ...

  8. 《SQLServer删除重复数据的方法》

    方法一: declare @max integer,@id integer open cur_rows fetch cur_rows into @id,@max begin set rowcount ...

  9. Java Programming Guidelines

    This appendix contains suggestions to help guide you in performing low-level program design and in w ...

  10. 转:ACCESS数据库转ORACLE数据库分享

    来源: 作者:zz 网上有很多文章介绍access转oracle数据库的方法,本人都尝试了,不是很成功,列举一下,后来人不必盲目试了,基本不成功: 1.Access-->excel-->P ...