box-shadow

box-shadow 该属性是用逗号分割列表来描述一个或多个阴影效果，几乎可用到任何元素。若同时在元素上设置了border-radius，阴影依然有圆角的效果。多个阴影的 z-ordering 和多个 text-shadows 规则相同。

语法

box-shadow: 20px 12px red;
box-shadow: 10px 3px 2px red;
box-shadow: 2px 3px 1px 2px rgba(0,0,0,1);
box-shadow: inset 3em 2em red;
box-shadow: 2px 1px green, -2em 0 3em olive;

值

值	描述
inset	此关键词表示默认阴影在边框外。使用该关键词后，阴影在边框内，背景在上内容在下。
<offset-x><offset-y>	此关键词表示前两个<length>值，用来设置阴影偏移量。第一个设置水平偏移量。若为负值，则阴影在元素的左侧。第二个设置垂直偏移量，如果是负值则阴影位于元素上面。
<blur-radius>	此关键词表示第三个<length>值。值越大，模糊面积越大，阴影就越大越淡。不可为负值。默认为0，此时阴影边缘锐利。
<spread-radius>	此关键词表示第四个<length>值。值为正值时，阴影扩大。为负值时，阴影收缩。默认为0，此时阴影同元素一样大。
<color>	此关键词通常表示阴影大颜色。

例子

HTML

<div id="red">
</div>

CSS

#red {
     width: 200px;
     height: 200px;
     box-shadow: 10px 5px 5px red;
     }

执行结果

参考

相关链接

外部链接

box-shadow-MDN


跳至内容顶部