Css 简明教程

CSS - box-shadow Property

CSS 的 box-shadow 属性用于在元素周围添加阴影效果。可以添加一个或多个阴影效果，并用逗号分隔。

框阴影由相对于元素的 X 和 Y 偏移、模糊、扩展半径和颜色描述。

Possible Values

inset ：如果没有指定值，则假定阴影是投影阴影。如果使用了嵌入式，则阴影会绘制在边框内、背景上方但内容下方。
<offset-x> ：以 <length> 单位指定水平距离。负值将阴影置于元素的左侧。
<offset-y> ：以 <length> 单位指定垂直距离。负值将阴影置于元素的上面。
<blur-radius> ：设置模糊效果的半径。第三个 <length> 值。值越大，模糊越大。不允许为负值。如果未提供值，则为 0，这会使阴影边缘变锐利。
<spread-radius> ：设置阴影的大小。第四个 <length> 值。正值会使阴影变大。负值会使阴影变小。如果没有提供该值，则为 0，这会使阴影与元素的大小相同。
* <color>* ：可能关键字和颜色符号的色彩值，如：颜色名称、十六进制数值、rgb 等。

Applies to

所有 HTML 元素。

DOM Syntax

object.style.boxShadow = "none | inset 10px 10px 5px rgb(255, 255, 255)";

CSS box-shadow - inset Value

这是一个示例：

<html>
<style>
    div {
        margin: 4em;
        padding: 1em;
        height: 80px;
        width: 80px;
        display: inline-block;
    }
    #a {
        box-shadow:10px 10px 10px 2em #f4aab9;
    }
    #b {
        box-shadow:inset -20px -3em 3em rgba(228, 228, 35, 0.8);
    }
    #c {
        box-shadow: 5px 15px 3px rgb(226, 67, 228);
        border: 1px solid black;
    }
</style>
<head>
</head>
<body>
    <div id="a"></div>
    <div id="b"></div>
    <div id="c"></div>
</body>
</html>