小程序/CSS阴影属性box-shadow

box-shadow属性可以设置一个或多个下拉阴影的框。

box-shadow: 10px 10px 5px #888888;

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

值	说明
h-shadow	必需的。水平阴影的位置。允许负值
v-shadow	必需的。垂直阴影的位置。允许负值
blur	可选。阴影模糊半径。其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊
spread	可选。阴影扩展半径。其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值时，则缩小
color	可选。阴影的颜色。如不设定颜色，浏览器会取默认色，但各浏览器默认取色不一致，特别是在webkit内核下的safari和chrome浏览器下表现为透明色，在Firefox/Opera下表现为黑色，建议不要省略此参数
inset	可选。从外层的阴影（开始时）改变阴影内侧阴影

为了兼容各主流浏览器并支持这些主流浏览器的较低版本，在基于Webkit的Chrome和Safari等浏览器上使用box-shadow属性时，我们需要将属性的名称写成-webkit-box-shadow的形式。Firefox浏览器则需要写成-moz-box-shadow的形式。

.box-shadow{
    //Firefox4.0-
    -moz-box-shadow: 投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色;
    //Safari、Google chrome10.0-
    -webkit-box-shadow: 投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色;
    //Firefox4.0+、Google chrome10.0+、Oprea10.5+、IE9
    box-shadow: 投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色;
}

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

属性
box-shadow	10.0 -webkit-	9.0.0	4.0 (2.0)[3] 3.5(1.9.1) -moz	5.1[1] 3.0 -webkit	10.5[1] -o-