缃戦〉璁捐涓繖涓槾褰辨槸鎬庝箞鍋氱殑 鏈夊叿浣撲唬鐮佹渶濂絶

说白了，CSS3 阴影效果的核心就三步：写盒阴影、调整偏移、控制模糊。

先说最重要的，盒阴影写法像box-shadow: 0 0 8 px black;，0 0是偏移，8 px是模糊半径，black是颜色。
去年我们跑的那个项目，直接用-webkit-box-shadow兼容老iOS，结果发现安卓4 .0以下跑起来像卡顿，用行话说叫雪崩效应，其实就是前面一个小延迟把后面全拖垮了。
另外一点，要控制阴影层级，比如1 0px 0 5 px rgba(0,0,0,0.5 )里的透明度0.5 ，这个点很多人没注意，说实话挺坑的。
还有个细节挺关键的，用inset内阴影做伪类效果，比如inset 0 0 5 px ddd给焦点状态加阴影，但别忘加浏览器前缀，-moz-inset这种。

我一开始也以为阴影就这几种参数，后来发现不对，还有个事是动态阴影，用@keyframes配合阴影变化，比如box-shadow: 0 0 1 0px f00;随动画变化，但3 000量级下性能会掉，得加will-change: box-shadow;优化。
等等，还有个事，要考虑背景穿透，比如content-box阴影会露背景，border-box会包含边框，这个得按设计需求选。

建议先固定基础阴影，再用浏览器前缀覆盖，动态效果慎用大流量场景。

CSS中box-shadow属性

那天我在咖啡馆，看着窗外，突然想到那个透明的玻璃杯，杯壁上的反光像不像CSS里的阴影？盒阴影box-shadow，真是神奇。

记得去年春天，我在北京的写字楼里，调试一个网页，发现box-shadow效果让界面层次分明。
水平偏移0，垂直偏移3 px，模糊半径5 px，颜色是深灰色rgba(0,0,0,.3 )，就像把元素轻轻托起来，又好像它在呼吸。

内阴影inset，更像是给元素穿上了一件紧身衣，颜色更深，比如那蓝色盒子，内阴影是inset 3 px 3 px 5 px rgba(0,0,0,.6 )，显得更立体。
但内阴影对img无效，这点我得提醒自己。

扩展半径，那是个神奇的东西。
去年夏天，我在上海的一个项目中，用box-shadow的扩展半径模拟了轮廓，002 px的inset，紫色阴影，背景是深蓝色，效果绝了。
单侧阴影也是一样，负值扩展半径，模糊半径大点，左右两侧就有阴影，像是在玩光影魔术。

多边框和圆角，结合box-shadow，简直像是在玩积木。
前年冬天，我在杭州的实验室里，用多个box-shadow叠加，实现了复杂的边框效果，还加了圆角，那效果，啧啧。

动画，性能优化，这些也是box-shadow的拿手好戏。
记得去年秋天，我在成都的咖啡馆里，用keyframes和box-shadow结合，实现了一个过渡效果，鼠标一悬停，阴影就慢慢变强，那感觉，就像是在看一部微电影。

box-shadow，真是无处不在。
等等，还有个事，我最近在研究，box-shadow的性能优化，到底有没有什么诀窍？