box-shadow 属性用以设置元素的样式效果。

box-shadow 属性值由以下的值组成。

  • inset:默认值为外部,设置了 inset 属性值则阴影在元素内部,没设置则在外部。
  • x 偏移量、 y 偏移量:默认值为 0, 设置元素在 x 与 y 轴上的偏移量。
  • 模糊半径:默认值为 0, 值越大则阴影的模糊面积越大。
  • 扩散半径:默认值为 0, 值越大则阴影的面积越大,默认与元素面积一样大。
  • 颜色:默认为黑色(#000)。

语法如下:

/* x偏移量 | y偏移量 | 阴影颜色 */
box-shadow: 60px -16px teal;

/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影颜色 */
box-shadow: 10px 5px 5px black;

/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

/* 插页(阴影向内) | x偏移量 | y偏移量 | 阴影颜色 */
box-shadow: inset 5em 1em gold;

/* 任意数量的阴影,以逗号分隔 */
box-shadow: 3px 3px red, -1em 0 0.4em olive;

长度数值的规则:

  • 两个长度值:x 的偏移量 | y 的偏移量。
  • 三个长度值:x 的偏移量 | y 的偏移量 | 模糊半径。
  • 四个长度值:x 的偏移量 | y 的偏移量 | 模糊半径 | 扩散半径。

<iframe height="300" style="width: 100%" scrolling="no" title="演示" src="https://codepen.io/3yya/embed/QWOPWyy?default-tab=css%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>


练习

  1. 完成以下的实例。

$$demo

<div class="box">三眼鸭的编程教室</div>

<style> .box { display: inline-block; font-size: 14px; border: 2px solid #333; padding: 10px 20px; box-shadow: 8px 8px teal; } </style>

$$

$$answer

<div class="box">三眼鸭的编程教室</div>

<style>
    .box {
        display: inline-block;
        font-size: 14px;
        border: 2px solid #333;
        padding: 10px 20px;
        box-shadow: 8px 8px teal;
    }
</style>

$$

  1. 完成以下的实例。

$$demo <div class="box">三眼鸭的编程教室</div>

<style> .box { display: inline-block; font-size: 14px; padding: 10px 20px;

    background-color: beige;

    box-shadow: -8px -8px red, 8px 8px orange,
        0 0 0 8px blue;
}

</style> $$

$$answer

<div class="box">三眼鸭的编程教室</div>

<style>
    .box {
        display: inline-block;
        font-size: 14px;
        padding: 10px 20px;

        background-color: beige;

        box-shadow: -8px -8px red, 8px 8px orange,
            0 0 0 8px blue;
    }
</style>

$$