CSS 属性：`box-shadow`

阴影！用于元素框！

可能的值

值	描述	示例
`none`	无阴影。默认值。
`inset` [长度] [长度] [长度] [长度] [颜色]	`inset` 是可选的——如果使用，它指定阴影向内，而不是向外。第一个长度是水平偏移量。正值将阴影向右推。负值将其向左推。必需。第二个长度是垂直偏移量。正值将阴影向下推。负值将其向上推。必需。第三个长度是模糊半径。值越高，模糊程度越大。不应为负数。可选——如果未使用，则默认为 `0`（边缘锐利，无模糊）。第四个长度是扩展距离。正值会扩大阴影。负值会收缩阴影。可选——如果未使用，则默认为 `0`（无扩展）。颜色是阴影的颜色。可选——如果未使用，则默认为 `color` 属性的计算值。	`inset 5px -5px 10px 10px rgba(0,0,0,0.2)`
[值]`,` [值]	多个阴影。一组阴影值可以用逗号分隔。第一个值集将定义顶层阴影，第二个值集在其下方生成阴影，依此类推。	`2px 2px 3px 红色, 4px 4px 3px 蓝色`
`inherit`
`initial`
`unset`

示例


#box1 {
    color: red;
    box-shadow: 5px -5px;
}
/* A red drop shadow stretching 5 pixels to the right and 5 pixels up, with a very solid, hard edge. */

#box2 {
    box-shadow: inset 0 0 10px rgba(0,0,0,.5);
}
/* A uniform, semi-transparent black inner-shadow with a 10-pixel-wide blur. */

#box3 {
    box-shadow: 5px -5px, inset 0 0 10px rgba(0,0,0,.5);
}
/* Two shadows, replicating those from #box1 and #box2. */

浏览器支持

Can I Use css-boxshadow? 来自 caniuse.com 的关于 css-boxshadow 特性在主流浏览器中支持情况的数据。