box-shadow

一般有6个属性值，我们编写的时候，通常都会按照下面这个顺序来写。

box-shadow: 水平位置(x轴) 垂直位置(y轴) 模糊距离阴影尺寸(影子的宽高) 阴影颜色内/外阴影。

它们分别对应的值为：h-shadow y-shadow blur spread color inset/outset ;

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            margin: 200px auto;
            width: 100px;
            height: 100px;
            background-color: orange;
            border: 10px solid #000; 
            /* box-shadow: 水平位置(x轴) 垂直位置(y轴) 模糊距离 阴影尺寸(影子的宽高) 阴影颜色 内阴影。 */
            box-shadow: 5px 5px 3px 0 rgba(255, 125, 249, .4) /* inset */ ;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

图片展示

QQ截图20211225000319.png

水平位置和垂直位置是必须设置的两个值。

模糊距离阴影尺寸(影子的宽高) 阴影颜色内/外阴影4个值都是可选设置。

box-shadow这个阴影一定是在盒子的最外层，spread阴影尺寸的宽高值是同等的。并且当spread的值大于水平位置或垂直位置时，左边和上边将会看到阴影。

box-shadow: 5px 5px 0 8px  rgba(255, 125, 249, .4) /* inset */ ;

QQ截图20211225001455.png

关于outset和inset

outset外阴影是默认的，我们不需要给他定义，定义了反而报错。而当我们使用了inset内阴影，所有的值都是向内而行，水平位置像是left，垂直位置像是top。阴影尺寸也是向内。

  box-shadow: 5px 5px 3px 6px  rgba(255, 125, 249, .4) inset ;

QQ截图20211225002545.png

并且，该阴影颜色会与背景颜色重叠，形成一个新颜色。

 div {
            margin: 200px auto;
            width: 100px;
            height: 100px;
            background-color: orange;
            border: 10px solid #000; 
            /* box-shadow: 水平位置(x轴) 垂直位置(y轴) 模糊距离 阴影尺寸(影子的宽高) 阴影颜色 内阴影。 */
            box-shadow: 5px 5px 3px 6px  rgba(255, 125, 249, .4) inset ;
        }

QQ截图20211225002752.png

CSS关于盒子阴影：box-shadow的一些设置与细节

box-shadow

就很有趣~