Box -shadow 阴影
使用这个 属性 可以让 页面 更有立体感，给元素 添加 一个 阴影，使得元素看起来是悬浮在原来的位置，下面就看看它的 用法 吧。
1. 官方定义
Box -shadow 属性 向框 添加 一个 或多个阴影。
2. 解释
通过 Box -shadow 可以给任意 H5 元素 添加 阴影，可以是 一个 ，如果用 , 号隔开可以 添加 多个。
3. 语法
Box -shadow : h-shadow v-shadow blur color ;
.demo {
Box -shadow : px px px #ccc ;
}
属性 值
值 说明 h-shadow 可选。水平方向阴影位置,以 文字 的中心为起点 >0 是往右，<0 时候偏左。 v-shadow 可选。竖直方向阴影位置， 用法 同上。 blur 可选。模糊的大小。 color 可选。阴影的颜色
5. 兼容性
IE Edge Firefox Chrome Safari Opera ios android all all all all all all all all
IE9+、Firefox 4、Chrome、Opera 以及 Safari 5.1.1 支持 Box -shadow 属性 。
6. 实例
< div class = " demo " > 网 </ div >
给demo 添加 一个 阴影。
.demo {
width : px ;
height : px ;
text-align : center ;
line-height : px ;
Box -shadow : px px px #ccc ;
}
效果 图
添加 一个 阴影 效果 图
给demo 添加 多个阴影。
.demo {
width : px ;
height : px ;
text-align : center ;
line-height : px ;
Box -shadow : px px px #ccc ,px px px rgba ( , , , ) ,px px px rgba ( , , , ) ;
}
效果 图
添加 多个阴影 效果 图
7. 经验 分享
它的一把用来给元素 添加 一个 阴影，交互设计师们热衷于在鼠标覆盖到元素时候，给元素 增加 一个 悬浮 效果 ，使它变得不同，例如:
.demo {
width : px ;
height : px ;
transition : Box -shadow s ;
}
.demo :hover {
Box -shadow : px px px #ccc ；
}
而网上常见的 css3 下雨 效果 ，就是利用 Box -shadow 颜色叠加的特性制作出来的。
< div class = " demo " > </ div >
.demo {
width : px ;
height : px ;
border-radius : ;
Box -shadow : px px px #dedede , px px px #dedede ,px px px #dedede ,px px px #dedede ;
}
效果 图
下雨 效果 效果 图
如果画得密集些就更像了，当然这些就需要专业的设计师去做 一个 方案了。
最后这里介绍一下阴影 效果 使用的窍门。
.demo {
width : px ;
height : px ;
text-align : center ;
line-height : px ; ;
Box -shadow : px px -px #000 , -px px -px #000 ;
}
效果 图
给元素 增加 悬浮 效果 效果 图
看完这个例子，我们应该已经明白 Box -shadow 形成的阴影 效果 可能是 一个 组合。
8. 小结
如果给 一个 元素 添加 多个阴影，那么后面的颜色层级高于前面的，也就是说如果前 3 个参数一样，后面的颜色会覆盖前面的颜色。 不要给不规则的图形 添加 阴影，因为这只会 添加 到块级元素中，不会验证 图片 的路径 添加 阴影，可以使用滤镜来达到这样的 效果 。
box-sizing 盒类型 ? ?border-radius 圆角