box-shadow: h-shadow v-shadow blur spread color inset;
其中,各个参数含义如下:
h-shadow
:必要参数,表示投影水平偏移距离。v-shadow
:必要参数,表示投影垂直偏移距离。blur
:可选参数,表示投影模糊程度。spread
:可选参数,表示投影的大小。color
:可选参数,表示投影颜色。inset
:可选参数,表示是否将投影嵌入到元素内部。
下面是一个例子,创建一个矩形元素,给它添加投影效果:
div { width: 200px; height: 200px; background-color: #eee; box-shadow: 10px 10px 10px #888888; }
上面的代码表示,创建一个宽度为 200 像素,高度为 200 像素,颜色为 #eee 的矩形元素,并在它的右下方添加大小为 10px 的投影。
需要注意的是,box-shadow 可以在一个元素上添加多个投影,只需要用逗号隔开即可:
div { box-shadow: 10px 10px 10px #888888, -10px -10px 10px #888888; }
这个例子表示,在一个元素上同时添加右下和左上两个方向的投影。所有的投影都以叠加的方式呈现在元素上。