前言

CSS3新增了box-shadow，用于设置盒子的阴影，今天玩了一下！

部分效果展示：

效果1 彩色边框效果

CSS代码如下

div.one div {
    width: 100px;
    height: 100px;
    margin: 50px auto;
    background-color: rgb(245, 234, 234);
    box-shadow:
        10px 0 15px -2px rgb(11, 11, 235),
        0 -10px 15px -2px rgb(103, 167, 8),
        -10px 0 15px -2px rgb(228, 64, 4),
        0 10px 15px -2px rgb(241, 7, 132);
}
div.one div:nth-of-type(1) {
    border-radius: 5%;
}
div.one div:nth-of-type(2) {
    border-radius: 30%;
}
div.one div:nth-of-type(3) {
    border-radius: 50%;
}

效果2 多边框效果

代码如下

.two div {
    width: 80px;
    height: 80px;
    margin: 50px auto;
    background-color: rgb(238, 226, 226);
    box-shadow: 0 0 0 10px rgb(243, 8, 8), 0 0 0 20px rgb(13, 13, 218), 0 0 0 30px rgb(241, 241, 6), 0 0 0 10px rgb(196, 144, 48) inset, 0 0 10px 20px green inset;
}
.two div:nth-of-type(1) {
    border-radius: 5%;
}
.two div:nth-of-type(2) {
    border-radius: 30%;
    box-shadow: 0 0 0 10px rgb(243, 8, 8), 0 0 0 20px rgb(13, 13, 218), 0 0 0 30px rgb(24, 248, 4), 0 0 0 10px rgb(8, 12, 238) inset, 0 0 10px 20px rgb(6, 236, 167) inset;
}
.two div:nth-of-type(3) {
    border-radius: 50%;
    box-shadow: 0 0 0 10px rgb(3, 233, 41), 0 0 0 20px rgb(13, 13, 218), 0 0 0 30px rgb(219, 6, 226), 0 0 0 10px rgb(97, 231, 8) inset, 0 0 10px 20px rgb(201, 198, 16) inset;
}

效果3 内阴影效果

代码如下

.three div {
    width: 200px;
    height: 200px;
    overflow: hidden;
    margin: 100px auto;
}
.three div>img {
    height: 200px;
    position: relative;
    z-index: -1;
}
.three div:nth-of-type(1) {
    box-shadow: 0 0 5px 10px rgba(2, 158, 248, 0.5) inset, 0 0 20px rgba(0, 0, 0, .8);
    border-radius: 5%;
}
.three div:nth-of-type(2) {
    box-shadow: 0 0 5px 10px rgba(14, 228, 43, 0.5) inset, 0 0 20px rgba(0, 0, 0, .8);
    border-radius: 30%;
}
.three div:nth-of-type(3) {
    box-shadow: 0 0 5px 10px rgba(245, 7, 146, 0.5) inset, 0 0 20px rgba(0, 0, 0, .8);
    border-radius: 50%;
}
.three div:nth-of-type(4) {
    box-shadow: 0 0 5px 10px rgba(245, 188, 1, 0.5) inset, 0 0 35px rgba(0, 0, 0, .8);
    border-radius: 50%;
}
.three div:nth-of-type(5) {
    box-shadow: 0 0 5px 10px rgba(252, 116, 5, 0.5) inset, 0 0 50px rgba(0, 0, 0, .8);
    border-radius: 50%;
}

效果4 折角效果

代码如下：

ul.four {
        list-style: none;
        text-align: center;
        font-size: 0;
}
ul.four li {
        display: inline-block;
        margin: 30px;
        width: 480px;
        height: 310px;
        border: 10px white solid;
        box-shadow: 0 0 5px rgba(0, 0, 0, .5);
        position: relative;
        background: white;
}
ul.four li div {
        width: 100%;
        height: 100%;
        overflow: hidden;
}
ul.four li::after,
ul.four li::before,
ul.four li div::after,
ul.four li div::before {
        content: "";
        position: absolute;
        width: 120px;
        height: 40px;
        background: rgb(130, 213, 236);
        box-shadow: 0 4px 3px -3px rgba(0, 0, 0, .3);
}
ul.four li::after {
        right: -60px;
        bottom: -25px;
        transform: rotate(135deg);
}
ul.four li::before {
        right: -60px;
        top: -20px;
        transform: rotate(45deg);
}
ul.four li div::after {
        left: -60px;
        bottom: -25px;
        transform: rotate(-135deg);
}
ul.four li div::before {
        left: -60px;
        top: -20px;
        transform: rotate(-45deg);
}

效果5 外翘边效果

代码如下：

ul.five {
    list-style: none;
    text-align: center;
    font-size: 0;
    display: flex;
}  
ul.five li {
    display: inline-block;
    margin: 30px;
    width: 500px;
    height: 340px;
    border: 10px white solid;
    box-shadow: 0 0 5px rgba(0, 0, 0, .5);
    position: relative;
    background: white;
}

ul.five li::after,
ul.five li::before {
    content: "";
    position: absolute;
    z-index: -2;
    top: 80%;
    bottom: 3%;
    left: 1%;
    right: 1%;
    box-shadow: 0 20px 15px rgba(0, 0, 0, .6);
    transform: skew(0, 5deg);
}

ul.five li::after {
    transform: skew(0, -5deg);
}

ul.five li span {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background:
        linear-gradient(to top right, rgba(0, 0, 0, .5), transparent 15%),
        linear-gradient(to top left, rgba(0, 0, 0, .5), transparent 15%)
}

效果6 内翘边效果

代码如下：

ul.six {
    list-style: none;
    text-align: center;
    font-size: 0;
}      
ul.six li {
    display: inline-block;
    margin: 30px;
    width: 480px;
    height: 312px;
    border: 10px white solid;
    box-shadow: 0 0 5px rgba(0, 0, 0, .5);
    position: relative;
    background: white;
    border-radius: 0 0 120px 120px / 0 0 30px 30px;            
}
ul.six li::after,
ul.six li::before {
    content: "";
    position: absolute;
    z-index: -2;
    top: 80%;
    bottom: 3%;
    left: .5%;
    right: .5%;
    box-shadow: 0 20px 15px rgba(0, 0, 0, .6);
    transform: skew(0, 5deg);
    border-radius: 40%;
}
ul.six li::after {
    transform: skew(0, -5deg);
}
ul.six li div {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 0 0 120px 120px / 0 0 25px 25px;
    position: relative;
}
ul.six li span {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background:
        linear-gradient(to top right, rgba(0, 0, 0, .5), transparent 15%),
        linear-gradient(to top left, rgba(0, 0, 0, .5), transparent 15%);
}

效果7 曲边特效

代码如下：

ul.seven {
    list-style: none;
    text-align: center;
    font-size: 0;
}
ul.seven li {
    display: inline-block;
    margin: 30px;
    width: 500px;
    height: 330px;
    border: 10px white solid;
    box-shadow: 0 0 5px rgba(0, 0, 0, .5);
    position: relative;
    background: white;
}
ul.seven li::after {
    content: "";
    position: absolute;
    z-index: -2;
    top: 80%;
    bottom: 0;
    left: 5%;
    right: 5%;
    box-shadow: 0 20px 20px rgba(0, 0, 0, .6);
    border-radius: 50%;
}

总结

最后总结一下box-shadow的具体用法：

格式：

box-shadow: 阴影类型 X轴偏移量 Y轴偏移量 阴影边缘模糊 阴影扩展半径 阴影色彩

• 阴影类型：包括内阴影和外阴影，默认是外阴影，可以设置inset即可表示内阴影
• X轴偏移量和Y轴偏移量：必填，用于表示阴影的位置，设置的值可正可负
• 阴影边缘模糊 ：默认为0，表示不模糊，模糊效果从阴影边缘向外扩展，只能是正值，模糊值越大，模糊的面积就越大，整体的阴影面积也会变大。
• 阴影扩展半径：即阴影大小，默认为0（不扩展），可以设置正负值，正值阴影延展扩大，负值阴影缩小。
• 阴影色彩：默认值为currentcolor

END

最后附件完整代码

附件

<!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>阴影特效</title>
    <style type="text/css">
        body {
            background-color: rgb(130, 213, 236);
        }

        body>* {
            display: flex;
            justify-self: center;
            align-items: center;
            flex-wrap: wrap;
        }

        div.one div {
            width: 100px;
            height: 100px;
            margin: 50px auto;
            background-color: rgb(245, 234, 234);
            box-shadow:
                10px 0 15px -2px rgb(11, 11, 235),
                0 -10px 15px -2px rgb(103, 167, 8),
                -10px 0 15px -2px rgb(228, 64, 4),
                0 10px 15px -2px rgb(241, 7, 132);
        }

        div.one div:nth-of-type(1) {
            border-radius: 5%;
        }

        div.one div:nth-of-type(2) {
            border-radius: 30%;
        }

        div.one div:nth-of-type(3) {
            border-radius: 50%;
        }

        .two div {
            width: 80px;
            height: 80px;
            margin: 50px auto;
            background-color: rgb(238, 226, 226);
            box-shadow: 0 0 0 10px rgb(243, 8, 8), 0 0 0 20px rgb(13, 13, 218), 0 0 0 30px rgb(241, 241, 6), 0 0 0 10px rgb(196, 144, 48) inset, 0 0 10px 20px green inset;
        }

        .two div:nth-of-type(1) {
            border-radius: 5%;
        }

        .two div:nth-of-type(2) {
            border-radius: 30%;
            box-shadow: 0 0 0 10px rgb(243, 8, 8), 0 0 0 20px rgb(13, 13, 218), 0 0 0 30px rgb(24, 248, 4), 0 0 0 10px rgb(8, 12, 238) inset, 0 0 10px 20px rgb(6, 236, 167) inset;
        }

        .two div:nth-of-type(3) {
            border-radius: 50%;
            box-shadow: 0 0 0 10px rgb(3, 233, 41), 0 0 0 20px rgb(13, 13, 218), 0 0 0 30px rgb(219, 6, 226), 0 0 0 10px rgb(97, 231, 8) inset, 0 0 10px 20px rgb(201, 198, 16) inset;
        }

        .three div {
            width: 200px;
            height: 200px;
            overflow: hidden;
            margin: 100px auto;
        }

        .three div>img {
            height: 200px;
            position: relative;
            z-index: -1;
        }

        .three div:nth-of-type(1) {
            box-shadow: 0 0 5px 10px rgba(2, 158, 248, 0.5) inset, 0 0 20px rgba(0, 0, 0, .8);
            border-radius: 5%;
        }

        .three div:nth-of-type(2) {
            box-shadow: 0 0 5px 10px rgba(14, 228, 43, 0.5) inset, 0 0 20px rgba(0, 0, 0, .8);
            border-radius: 30%;
        }

        .three div:nth-of-type(3) {
            box-shadow: 0 0 5px 10px rgba(245, 7, 146, 0.5) inset, 0 0 20px rgba(0, 0, 0, .8);
            border-radius: 50%;
        }

        .three div:nth-of-type(4) {
            box-shadow: 0 0 5px 10px rgba(245, 188, 1, 0.5) inset, 0 0 35px rgba(0, 0, 0, .8);
            border-radius: 50%;
        }

        .three div:nth-of-type(5) {
            box-shadow: 0 0 5px 10px rgba(252, 116, 5, 0.5) inset, 0 0 50px rgba(0, 0, 0, .8);
            border-radius: 50%;
        }


        ul.four {
            list-style: none;
            text-align: center;
            font-size: 0;
        }

        ul.four li {
            display: inline-block;
            margin: 30px;
            width: 480px;
            height: 310px;
            border: 10px white solid;
            box-shadow: 0 0 5px rgba(0, 0, 0, .5);
            position: relative;
            background: white;
        }

        ul.four li div {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        ul.four li::after,
        ul.four li::before,
        ul.four li div::after,
        ul.four li div::before {
            content: "";
            position: absolute;
            width: 120px;
            height: 40px;
            background: rgb(130, 213, 236);
            box-shadow: 0 4px 3px -3px rgba(0, 0, 0, .3);
        }

        ul.four li::after {
            right: -60px;
            bottom: -25px;
            transform: rotate(135deg);
        }

        ul.four li::before {
            right: -60px;
            top: -20px;
            transform: rotate(45deg);
        }

        ul.four li div::after {
            left: -60px;
            bottom: -25px;
            transform: rotate(-135deg);
        }

        ul.four li div::before {
            left: -60px;
            top: -20px;
            transform: rotate(-45deg);
        }


        ul.five {
            list-style: none;
            text-align: center;
            font-size: 0;
            display: flex;
        }

        ul.five li {
            display: inline-block;
            margin: 30px;
            width: 500px;
            height: 340px;
            border: 10px white solid;
            box-shadow: 0 0 5px rgba(0, 0, 0, .5);
            position: relative;
            background: white;
        }

        ul.five li::after,
        ul.five li::before {
            content: "";
            position: absolute;
            z-index: -2;
            top: 80%;
            bottom: 3%;
            left: 1%;
            right: 1%;
            box-shadow: 0 20px 15px rgba(0, 0, 0, .6);
            transform: skew(0, 5deg);
        }

        ul.five li::after {
            transform: skew(0, -5deg);
        }

        ul.five li span {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            background:
                linear-gradient(to top right, rgba(0, 0, 0, .5), transparent 15%),
                linear-gradient(to top left, rgba(0, 0, 0, .5), transparent 15%)
        }

        ul.six {
            list-style: none;
            text-align: center;
            font-size: 0;
        }

        ul.six li {
            display: inline-block;
            margin: 30px;
            width: 480px;
            height: 312px;
            border: 10px white solid;
            box-shadow: 0 0 5px rgba(0, 0, 0, .5);
            position: relative;
            background: white;
            border-radius: 0 0 120px 120px / 0 0 30px 30px;
        }

        ul.six li::after,
        ul.six li::before {
            content: "";
            position: absolute;
            z-index: -2;
            top: 80%;
            bottom: 3%;
            left: .5%;
            right: .5%;
            box-shadow: 0 20px 15px rgba(0, 0, 0, .6);
            transform: skew(0, 5deg);
            border-radius: 40%;
        }

        ul.six li::after {
            transform: skew(0, -5deg);
        }

        ul.six li div {
            width: 100%;
            height: 100%;
            overflow: hidden;
            border-radius: 0 0 120px 120px / 0 0 25px 25px;
            position: relative;
        }

        ul.six li span {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            background:
                linear-gradient(to top right, rgba(0, 0, 0, .5), transparent 15%),
                linear-gradient(to top left, rgba(0, 0, 0, .5), transparent 15%);
        }

        ul.seven {
            list-style: none;
            text-align: center;
            font-size: 0;
        }

        ul.seven li {
            display: inline-block;
            margin: 30px;
            width: 500px;
            height: 330px;
            border: 10px white solid;
            box-shadow: 0 0 5px rgba(0, 0, 0, .5);
            position: relative;
            background: white;
        }

        ul.seven li::after {
            content: "";
            position: absolute;
            z-index: -2;
            top: 80%;
            bottom: 0;
            left: 5%;
            right: 5%;
            box-shadow: 0 20px 20px rgba(0, 0, 0, .6);
            border-radius: 50%;
        }
    </style>
</head>

<body>
    <span>多彩边框</span>
    <div class="one">
        <div></div>
        <div></div>
        <div></div>
    </div>
    <span>多重边框</span>
    <div class="two">
        <div></div>
        <div></div>
        <div></div>
    </div>

    <span>内阴影特效</span>
    <div class="three">

        <div><img src="./img/0.jpg" /></div>
        <div><img src="./img/0.jpg" /></div>
        <div><img src="./img/0.jpg" /></div>
        <div><img src="./img/0.jpg" /></div>
        <div><img src="./img/0.jpg" /></div>
    </div>

    <h3>折角效果 </h3>
    <ul class="four">
        <li>
            <div><img src="img/1.jpg" /></div>
        </li>
        <li>
            <div><img src="img/2.jpg" /></div>
        </li>
    </ul>
    <h3>外翘边效果 </h3>
    <ul class="five">
        <li><img src="img/3.jpg" /><span></span></li>
        <li><img src="img/3.jpg" /><span></span></li>
        <li><img src="img/4.jpg" /><span></span></li>
        <li><img src="img/4.jpg" /><span></span></li>
    </ul>

    <h3>内翘边效果 </h3>
    <ul class="six">
        <li>
            <div><img src="img/5.jpg" /><span></span></div>
        </li>
        <li>
            <div><img src="img/6.jpg" /><span></span></div>
        </li>
        <li>
            <div><img src="img/7.jpg" /><span></span></div>
        </li>
        <li>
            <div><img src="img/7.jpg" /><span></span></div>
        </li>
    </ul>

    <h3>曲边效果 </h3>
    <ul class="seven">
        <li><img src="img/7.jpg" /></li>
        <li><img src="img/7.jpg" /></li>
    </ul>
</body>

</html>