【CSS3】---阴影 box-shadow
2015-06-04 14:21
676 查看
box-shadow是向盒子添加阴影。支持添加一个或者多个。实现了投影效果
语法:
box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]
参数介绍:
注意:inset 可以写在参数的第一个或最后一个,其它位置是无效的。
1.为元素设置外阴影:
2.为元素设置内阴影:
以上的语法的介绍,就这么简单,如果添加多个阴影,只需用逗号隔开即可。如:
4、阴影模糊半径与阴影扩展半径的区别
阴影模糊半径:此参数可选,其值只能是为正值,如果其值为0时,表示阴影不具有模糊效果,其值越大阴影的边缘就越模糊;
阴影扩展半径:此参数可选,其值可以是正负值,如果值为正,则整个阴影都延展扩大,反之值为负值时,则缩小;
5、X轴偏移量和Y轴偏移量值可以设置为负数
X轴偏移量为负数:
效果图:
Y轴偏移量为负数:
效果图:
语法:
box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]
参数介绍:
注意:inset 可以写在参数的第一个或最后一个,其它位置是无效的。
1.为元素设置外阴影:
.box_shadow{ box-shadow:4px 2px 6px #333333; }
效果:
2.为元素设置内阴影:
.box_shadow{ box-shadow:4px 2px 6px #333333 inset; }
效果:
3.添加多个阴影:
以上的语法的介绍,就这么简单,如果添加多个阴影,只需用逗号隔开即可。如:
.box_shadow{ box-shadow:4px 2px 6px #f00, -4px -2px 6px #000, 0px 0px 12px 5px #33CC00 inset; }
效果:
4、阴影模糊半径与阴影扩展半径的区别
阴影模糊半径:此参数可选,其值只能是为正值,如果其值为0时,表示阴影不具有模糊效果,其值越大阴影的边缘就越模糊;
阴影扩展半径:此参数可选,其值可以是正负值,如果值为正,则整个阴影都延展扩大,反之值为负值时,则缩小;
5、X轴偏移量和Y轴偏移量值可以设置为负数
box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];
X轴偏移量为负数:
.boxshadow-outset{ width:100px; height:100px; box-shadow:-4px 4px 6px #666; }
效果图:
Y轴偏移量为负数:
.boxshadow-outset{ width:100px; height:100px; box-shadow:4px -4px 6px #666; }
效果图:
相关文章推荐
- 【CSS3】---学习目录
- 【CSS3】---认识CSS3
- 【CSS3】---圆角效果 border-radius
- CSS强制英文/中文换行与不换行
- 【WebKit】---WebKit的CSS扩展(WebKit是私有属性)
- css一些小tip
- css background
- 前端性能优化之js,css调用优化
- CSS3新特性+less实验——animation
- Primer – 支撑 GitHub 的 CSS 工具包和准则
- CSS中的before和after伪元素及其应用
- 解决checkbox样式的问题
- Play - js/css concatenation & minify
- 用CSS代码来判断浏览器是Firefox、IE6、IE7的网页特效代码
- css margin的相关属性,问题及应用
- CSS相对定位|绝对定位(五)之z-index篇
- CSS 相对/绝对(relative/absolute)定位系列(二)
- CSS 相对|绝对(relative/absolute)定位系列(一)
- 七个你可能不了解的CSS单位
- CSS float浮动的深入研究、详解及拓展(二)