CSS学习笔记:box-shadow
2016-12-28 21:39
756 查看
在CSS3中,box-shadow属性实现盒容器的阴影效果,几乎可以用到任何元素上。
兼容性:IE9
如果元素同时设置了border-radius,阴影也会有圆角效果。
在该属性中,要设置阴影相对于盒容器水平及垂直方向上的偏移值、阴影的颜色、还可以选择性地设置模糊半径和扩展半径。
inset:默认阴影是在边框外,使用inset后,阴影在边框内(即使是透明边框),背景之上内容之下。
offset-x,offset-y:这是头两个length值,用于设置阴影偏移量。
offset-x 设置水平偏移量,如果是负值则阴影位于元素左边。
offset-y 设置垂直偏移量,如果是负值则阴影位于元素上面。
如果两者都是0,那么阴影位于元素后面。这时如果设置了blur-radius 或spread-radius则有模糊效果。
blur-radius:这是第三个length值,表示模糊半径。值越大,模糊面积越大,阴影就越大越淡。
不能为负值。
默认为0,此时阴影边缘锐利。
spread-radius:这是第四个 length 值,表示扩展半径。取正值时,阴影扩大;取负值时,阴影收缩。
默认为0,此时阴影与元素同样大。
color:阴影颜色
可以设置多个阴影效果,用逗号分隔。它们依次层叠在一起,首先被声明的阴影位于最上方。
发光效果
不设置偏移,并可以选择性的设置一个正数值的扩展半径
为盒容器模拟多层边框
使用多组box-shadow值,并将模糊半径设为0以有清晰的边界。
兼容性:IE9
如果元素同时设置了border-radius,阴影也会有圆角效果。
在该属性中,要设置阴影相对于盒容器水平及垂直方向上的偏移值、阴影的颜色、还可以选择性地设置模糊半径和扩展半径。
语法
box-shadow:none | [inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ] ]#
inset:默认阴影是在边框外,使用inset后,阴影在边框内(即使是透明边框),背景之上内容之下。
offset-x,offset-y:这是头两个length值,用于设置阴影偏移量。
offset-x 设置水平偏移量,如果是负值则阴影位于元素左边。
offset-y 设置垂直偏移量,如果是负值则阴影位于元素上面。
如果两者都是0,那么阴影位于元素后面。这时如果设置了blur-radius 或spread-radius则有模糊效果。
blur-radius:这是第三个length值,表示模糊半径。值越大,模糊面积越大,阴影就越大越淡。
不能为负值。
默认为0,此时阴影边缘锐利。
spread-radius:这是第四个 length 值,表示扩展半径。取正值时,阴影扩大;取负值时,阴影收缩。
默认为0,此时阴影与元素同样大。
color:阴影颜色
可以设置多个阴影效果,用逗号分隔。它们依次层叠在一起,首先被声明的阴影位于最上方。
例子
/* offset-x | offset-y | color */ box-shadow: 60px -16px teal;
/* offset-x | offset-y | blur-radius | color */ box-shadow: 10px 5px 5px black;
/* offset-x | offset-y | blur-radius | spread-radius | color */ box-shadow: 10px 20px 10px 3px rgba(0,0,0,0.2);
/* inset | offset-x | offset-y | color */ box-shadow: inset 10px 20px gold;
box-shadow: inset 0 0 10px 2px red;
/* Any number of shadows, separated by commas */ box-shadow: 3px 3px red, -1em 0 0.4em olive;
用途
除了为盒容器实现基本的阴影之外,还可以用于以下场景:发光效果
不设置偏移,并可以选择性的设置一个正数值的扩展半径
box-shadow: 0 0 10px 2px gold;
为盒容器模拟多层边框
使用多组box-shadow值,并将模糊半径设为0以有清晰的边界。
box-shadow: 0 0 0 10px gold, 0 0 0 20px green, 0 0 0 30px red;
相关文章推荐
- CSS学习笔记:flexbox
- css布局学习笔记之box-sizing
- CSS学习笔记:text-shadow
- css flexbox 学习笔记(一)
- css布局学习笔记之box-sizing
- css学习笔记-盒子的box-size
- CSS学习笔记:box-sizing
- css布局学习笔记之box-sizing
- 【css技术指南笔记】七章 border-radius box-shadow
- CSS学习笔记-附加篇( 新浪大通栏Tab样式)
- CSS入门学习笔记
- css学习笔记(3)图文混排 分级 鼠标
- CSS学习笔记-附加篇( CSS仿淘宝首页导航条按钮布局效果)
- css学习笔记(5)动态定位 滤镜
- CSS学习笔记-附加篇(web标准化设计:常用的CSS命名规则)
- Css学习笔记(一)
- XHTML+css,web标准学习笔记1——DOCTYPE声明
- CSS入门学习笔记[1]
- XHTML+css,web标准学习笔记2——名字空间
- CSS学习笔记-附加篇(CSS的超级技巧)