.box {
box-shadow: -10px 0 10px -10px rgba(0, 0, 0, 0.5),
0 10px 10px -10px rgba(0, 0, 0, 0.5),
10px 0 10px -10px rgba(0, 0, 0, 0.5);
}以上代码中，box-shadow属性值每个关键字意义如下：
- 关键字1：-10px 0 10px -10px
- 关键字2：0 10px 10px -10px
- 关键字3：10px 0 10px -10px
- 关键字4：rgba(0, 0, 0, 0.5)
三个关键字分别表示左边、上边和右边阴影的大小、位置、模糊和扩散程度，rgba(0, 0, 0, 0.5)代表阴影颜色为黑色，透明度为50%。
同时，为了保证浏览器的兼容性，最好将vender-prefix加上，以供不同浏览器使用：
.box {
-webkit-box-shadow: -10px 0 10px -10px rgba(0, 0, 0, 0.5),
0 10px 10px -10px rgba(0, 0, 0, 0.5),
10px 0 10px -10px rgba(0, 0, 0, 0.5);
-moz-box-shadow: -10px 0 10px -10px rgba(0, 0, 0, 0.5),
0 10px 10px -10px rgba(0, 0, 0, 0.5),
10px 0 10px -10px rgba(0, 0, 0, 0.5);
box-shadow: -10px 0 10px -10px rgba(0, 0, 0, 0.5),
0 10px 10px -10px rgba(0, 0, 0, 0.5),
10px 0 10px -10px rgba(0, 0, 0, 0.5);
}以上代码中，-webkit-box-shadow是针对Chrome和Safari浏览器，-moz-box-shadow是针对Firefox浏览器，box-shadow是标准的CSS3属性值。
大家可以按照不同的需求在CSS中设计出不同的阴影效果。同时，为了保证网页在不同的浏览器中都能获得稳定的效果，大家需要在代码中添加相应的vender-prefix。