CSS - box-shadow 属性

上一页
下一页

CSS box-shadow 属性可在元素周围添加阴影效果。可以添加一个或多个阴影效果，用逗号分隔。盒阴影由相对于元素的水平和垂直偏移量、模糊半径、扩展半径和颜色来描述。

语法

box-shadow: none | h-offset v-offset blur spread color | inset | initial | inherit;

属性值

值 描述
none 此值不显示任何阴影。默认值
h-offset 定义水平偏移量。正值将阴影放置在框的右侧，负值将阴影放置在框的左侧。必需。
v-offset 定义垂直偏移量。正值将阴影放置在框的下方，负值将阴影放置在框的上方。必需
blur 定义模糊半径。值越高，模糊度越高。可选。
spread 定义扩展半径。正值会增加阴影的大小，负值会减小阴影的大小。可选
color 定义阴影的颜色。可以使用不同的颜色格式。默认为文本颜色。可选
inset 将外部阴影更改为内部阴影。
initial 将属性设置为其默认值。
inherit 从父元素继承属性。

CSS 盒阴影属性示例

以下示例说明了使用不同值的 box-shadow 属性。

带有盒阴影的盒阴影属性

要为框设置阴影，我们至少需要指定两个值，一个用于 水平 偏移量，另一个用于 垂直 偏移量。根据值的符号，阴影的位置会相应更改。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        .container {
            display: grid;
            justify-content: center;
            align-items: center;
            gap: 30px;
        }
        .boxes {
            padding: 50px;
            text-align: center;
            font-weight: bold;
        }
        .first {
            background-color: lightcoral;
            box-shadow: 10px 10px;
        }
        .second {
            background-color: lightblue;
            box-shadow: 10px -10px;
        }
        .third {
            background-color: lightgreen;
            box-shadow: -10px 10px;
        }
        .fourth {
            background-color: lightgrey;
            box-shadow: -10px -10px;
        }
    </style>
</head>

<body>
    <h2>
        CSS box-shadow property
    </h2>
    <p>
        Positive horizontal offset places the shadow
        to the right of box and negative horizotal offset
        places the shadow to the left of box. 
    </p>
    <p>
        Positive vertical offset places the 
        shadow below the box and negative values places
        it above the box.
    </p>
    <div class="container">

        <p class="first boxes">
            box-shadow: 10px 10px
        </p>
        <p class="second boxes">
            box-shadow: 10px -10px
        </p>
        <p class="third boxes">
            box-shadow: -10px 10px
        </p>
        <p class="fourth boxes">
            box-shadow: -10px -10px
        </p>
    </div>

</body>

</html>

带有模糊的盒阴影属性

要为框的阴影设置模糊，我们需要指定三个值。前两个值是水平和垂直偏移量，第三个值用于模糊，第三个值越高，模糊度越大。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        .container {
            display: grid;
            justify-content: center;
            align-items: center;
            gap: 30px;
        }

        .boxes {
            padding: 50px;
            text-align: center;
            font-weight: bold;
        }

        .first {
            background-color: lightcoral;
            box-shadow: 10px 10px 10px;
        }

        .second {
            background-color: lightcoral;
            box-shadow: 10px 10px 20px;
        }

        .third {
            background-color: lightcoral;
            box-shadow: 10px 10px 40px;
        }    
    </style>
</head>

<body>
    <h2>
        CSS box-shadow property
    </h2>
    <p>
        The third value decides the blur, 
        greater the value more is the blur.
    </p>
    <div class="container">

        <p class="first boxes">
            box-shadow: 10px 10px 10px
        </p>
        <p class="second boxes">
            box-shadow: 10px -10px 20px
        </p>
        <p class="third boxes">
            box-shadow: -10px 10px 40px
        </p>

    </div>

</body>

</html>

带有扩展值的盒阴影属性

要设置框阴影的大小，我们需要指定四个值。前两个值是水平和垂直偏移量，第三个值用于模糊，第四个值决定阴影的大小，正值导致更大的阴影，而负值导致更小的阴影。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        .container {
            display: grid;
            justify-content: center;
            align-items: center;
            gap: 30px;
        }

        .boxes {
            padding: 50px;
            text-align: center;
            font-weight: bold;
        }

        .first {
            background-color: lightblue;
            box-shadow: 10px 10px 10px 5px;
        }

        .second {
            background-color: lightblue;
            box-shadow: 10px 10px 20px 15px;
        }

        .third {
            background-color: lightblue;
            box-shadow: 10px 10px 40px -5px;
        }    
    </style>
</head>

<body>
    <h2>
        CSS box-shadow property
    </h2>
    <p>
        The fourth value decides the size of the shadow, 
        positive value results in larger shadow while negative
        value results in smaller shadow.
     </p>
    <div class="container">

        <p class="first boxes">
            box-shadow: 10px 10px 10px 5px
        </p>
        <p class="second boxes">
            box-shadow: 10px -10px 20px 14px
        </p>
        <p class="third boxes">
            box-shadow: -10px 10px 40px -5px
        </p>

    </div>

</body>

</html>

带有颜色的盒阴影属性

要为框的阴影设置颜色，我们需要至少指定三个值。前两个值是水平和垂直偏移量，第三个值用于颜色，颜色也可以与模糊和扩展一起指定。颜色可以用不同的格式指定（例如，颜色名称、十六进制值、rgb 值等）。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        .container {
            display: grid;
            justify-content: center;
            align-items: center;
            gap: 30px;
        }

        .boxes {
            padding: 50px;
            text-align: center;
            font-weight: bold;
        }

        .first {
            background-color: lightcoral;
            box-shadow: 10px -10px grey;
        }

        .second {
            background-color: lightcoral;
            box-shadow: 10px 10px 20px rgb(51, 204, 0);
        }

        .third {
            background-color: lightcoral;
            box-shadow: 10px 10px 40px -5px hsl(225, 100%, 50%);
        }    
    </style>
</head>

<body>
    <h2>
        CSS box-shadow property
    </h2>
    <p>
        The color can be specified as third parameter,
        fourth parameter of even fifth parameter. 
        The specified color will be applied to the shadow.
     </p>
    <div class="container">
        <p class="first boxes">
            box-shadow: 10px -10px grey
        </p>
        <p class="second boxes">
            box-shadow: 10px 10px 20px rgb(51, 204, 0)
        </p>
        <p class="third boxes">
            box-shadow: 10px 10px 40px -5px hsl(225, 100%, 50%)
        </p>

    </div>

</body>

</html>

带有内嵌值的盒阴影属性

要让盒阴影出现在元素内部而不是外部，我们使用 inset 值。这在以下示例中显示

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        .container {
            display: grid;
            justify-content: center;
            align-items: center;
            gap: 30px;
        }

        .boxes {
            padding: 50px;
            text-align: center;
            font-weight: bold;
        }

        .first {
            background-color: lightgreen;
            box-shadow: 10px -10px red inset;
        }

        .second {
            background-color: lightgreen;
            box-shadow: 10px 10px 20px rgb(51, 204, 0) inset;
        }
    </style>
</head>

<body>
    <h2>
    CSS box-shadow property
    </h2>
    <p>
        The inset value places the
        shadow within the elment.
    </p>
    <div class="container">
        <p class="first boxes">
            box-shadow: 10px -10px red inset
        </p>
        <p class="second boxes">
            box-shadow: 10px 10px 20px rgb(51, 204, 0) inset
        </p>

    </div>

</body>

</html>

带有多个阴影的盒阴影属性

要为框设置多个阴影，每个样式都必须用逗号分隔。阴影将按照在 box-shadow 属性中指定的顺序显示。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        .container {
            display: grid;
            justify-content: center;
            align-items: center;
            gap: 30px;
        }

        .boxes {
            padding: 50px;
            text-align: center;
            font-weight: bold;
        }

        .first {
            background-color: lightcoral;
            box-shadow: 10px -10px grey, 
            15px -15px black, 
            20px -20px brown;
        }

        .second {
            background-color: lightgreen;
            box-shadow: 5px 5px red, 
            10px 10px blue, 
            15px 15px green;
        }
    </style>
</head>

<body>
    <h2>
    CSS box-shadow property
    </h2>
    <p>
        Number of shadows can be altered by 
        specifying the different styles and
        separating them by commas. 
    </p>
    <div class="container">
        <p class="first boxes">
            box-shadow: multiple shadows
        </p>
        <p class="second boxes">
            box-shadow: multiple shadows
        </p>
    </div>

</body>

</html>

支持的浏览器

属性 Chrome Edge Firefox Safari Opera
box-shadow 10.0 9.0 4.0 5.1 10.5
css_properties_reference.htm
打印页面
上一页
下一页
广告