Css 简明教程

CSS - box-shadow Property

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

The box-shadow property of CSS is useful in adding a shadow effect around an element. One or more shadow effects can be added, separated by commas.

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

The box shadow is described by X and Y offsets relative to the element, blur, spread radius and color.

Possible Values

  1. inset: Shadow is assumed to be a drop shadow, if no value is specified. If inset is used, the shadow is drawn inside the border, above the background, but below content.

  2. <offset-x>: Specifies the horizontal distance in <length> terms. Negative value positions the shadow to the left of element.

  3. <offset-y>: Specifies the vertical distance in <length> terms. Negative value positions the shadow above the element.

  4. <blur-radius>: Sets the radius for the blur effect. Third <length> value. Larger the value, bigger is the blur. Negative values are not allowed. In absence of a value, it is 0, which makes the edges of shadow sharp.

  5. <spread-radius>: Sets the size of the shadow. Fourth <length> value. Positive values make the shadow to grow bigger. Negative values make the shadow to shrink. In absence of a value, it is 0, which makes the shadow of size same as the element.

  6. <color>: Color values for possible keywords and color notations, such as, color name, hex value, rgb, etc.

Applies to

所有 HTML 元素。

All the HTML elements.

DOM Syntax

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

CSS box-shadow - inset Value

这是一个示例:

Here is an example:

<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>