CSS3 - 盒子阴影

作者: Hyso | 来源:发表于2019-03-11 10:35 被阅读0次

border 内边框设置圆角
CSS3 盒子模型
第3章 CSS3边框-5
CSS3 基础（2）——文本效果和字体
盒子阴影
CSS3 - 盒子阴影
CSS3基础
CSS3盒子阴影
CSS3 盒子阴影、尺寸、空间
CSS3 弹性盒子(Flex Box)

box-shadow: offset-x offset-y [blur [spread]] [color] [inset]

box-shadow 属性用于向盒子添加一个或多个阴影效果。
offset-x：阴影的水平偏移量。正数向右偏移，负数向左偏移。
offset-y：阴影的垂直偏移量。正数向下偏移，负数向上偏移。
blur：阴影模糊度，不能取负数。
spread：阴影大小。正数阴影扩大（阴影大小大于盒子大小），负数阴影缩小（阴影大小小于盒子大小），0阴影与盒子同等大小。
inset：表示添加内阴影，默认为外阴影。

外阴影

设置单个阴影

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .box {
            width: 300px;
            height: 300px;
            margin: 100px 100px;
            border: 1px solid #CCCCCC;
            box-shadow: 0px 0px 20px red;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

运行结果：

设置多个阴影

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .box {
            width: 300px;
            height: 300px;
            margin: 100px 100px;
            border: 1px solid #CCCCCC;
            box-shadow: 0px 0px 10px red, 5px -5px 10px blue, 10px -10px 10px yellow, 20px -20px 10px black;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

运行结果：

spread取值对阴影大小的影响

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .box {
            width: 100px;
            height: 100px;
            margin: 100px 100px;
            border: 1px solid #CCCCCC;
            box-shadow: 120px 0px 0px 0px red;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

运行结果：

由上图可见，当 spread 为0时，阴影大小与元素大小相同。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .box {
            width: 100px;
            height: 100px;
            margin: 100px 100px;
            border: 1px solid #CCCCCC;
            box-shadow: 120px 0px 0px 10px red;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

运行结果：

由上图可见，当 spread 为正数时，阴影大小将大于元素大小。如原来总宽高为102px的元素（包括边框2px），在设置阴影大小为10px后，阴影的宽高会变为122px（阴影宽高各加10）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .box {
            width: 100px;
            height: 100px;
            margin: 100px 100px;
            border: 1px solid #CCCCCC;
            box-shadow: 120px 0px 0px -10px red;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

运行结果：

由上图可见，当 spread 为负数时，阴影大小将小于元素大小。如原来总宽高为102px的元素（包括边框2px），在设置阴影大小为-10px后，阴影的宽高会变为82px（阴影宽高各减10）。

内阴影

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .box {
            width: 300px;
            height: 300px;
            margin: 100px 100px;
            border: 1px solid #CCCCCC;
            box-shadow: 0px 0px 20px red inset;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

运行结果：