css box-shadow的解读

浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。

带 -webkit- 或 -moz- 的数字表示使用前缀的首个版本。解释：就是首次使用该前缀的浏览器版本号

属性	Chrome	IE	Firefox	Safari	Opera
box-shadow	10.0 4.0 -webkit-	9.0	4.0 3.5 -moz-	5.1 3.1 -webkit-	10.5

定义和用法

box-shadow: h-shadow v-shadow blur spread color inset;

注释：box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。

值	描述
h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊距离。
spread	可选。阴影的尺寸。
color	可选。阴影的颜色。请参阅 CSS 颜色值。
inset	可选。将外部阴影 (outset) 改为内部阴影。

“2-4 个长度值”的解释看下图：

 2个长度：box-shadow: 10px 10px black; 阴影向右，向下偏移10个像素；

3个长度：box-shasow:10px 10px 5px black;阴影向右，向下偏移10个像素，模糊距离是5，注意在偏移的基础上向内2.5px，向外2.5px的模糊.

4个长度：box-shasow:10px 10px 5px 10px black;阴影向右，向下偏移10个像素，模糊距离是5，注意在偏移的基础上向内2.5px，向外2.5px的模糊.阴影大小10的意思就是在向右，向下偏移的基础上增加阴影像素，然后在在其基础上模糊。

注意

注意根据以往的经验用css为四个边框增加宽度，如：border：1px 1px 1px 1px,意思是上、右、下、左边框的宽度。但是阴影如何为四个边框增加阴影的，思想就是设置四个阴影，每个阴影都做坐标偏移目的是隐藏某一个边的阴影这样就会形成四个不同的阴影。

box-shadow: -4px 0px 0px 0px red,0px -4px 0px 0px green,4px 0px 0px blue ,0px 4px 0px yellow;