box-shadow 还可以这么写

http://www.css88.com/tool/css3Preview/Box-Shadow.html 编辑边框网址

用css3 添加阴影框 box-shadow

ie9 以上 google ,safari,opera 支持此属性

box-shadow:h-shadow v-shadow blur spread color inset; 此为标准语法

h-shadow 必须 ，水平阴影的位置 ，允许负值

v-shadow 必须 ，垂直阴影的位置 ，允许负值

blur 可选 模糊距离

spread 可选 阴影尺寸

color 可选 阴影颜色

inset 可选 修改内外部阴影参数（inset）内部 (outset) 外部 默认为外部；

平常都是 按照标准写，没想到网上还有其他写法

平常我只实现了 三种阴影效果，（当然也许我学着太浅薄了，只找到三种）

只有边框 单边（只上边，只下边，只左边，只右边）

或是两边（上左，上右，下左，下右）（h-shadow 取 负左正右，v-shadow 取 负上正下）

或是 四边（上下左右）

但是 有没有想过取 两边(上下，左右)

或是三边( 左上右，上右下，右下左，下左上) 的取法

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

只设置单边 写两遍，当然其中的水平位置或是垂直位置 设置为0像素，保证另两边不出现阴影

例

上下阴影

box-shadow:0px -10px 6px -3px #888888,0px 10px 6px -3px #888888;


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

只设置单边 写三遍，设置两边阴影，,保证其中一边始终重复出现阴影

例

上右下

box-shadow: 5px 10px 6px 3px #888888,5px -10px 6px 3px #888888;


也许看起来有点二 不过能实现效果

以上是我个人测试，有不足之处，请指出来，我好及时修改