CSS中伪元素的使用技巧

主要使用到box-shadow:box-shadow: inset horizontal vertical blur spread colour;

box-shadow 属性向框添加一个或多个阴影,在最后几个例子中用到。

HTML

<div class="box effect1">
    <h3>Effect 1</h3>
</div>
CSS
.box h3 {
            text-align: center;
            position: relative;
            top: 80px;
        }
        
        .box {
            width: 70%;
            height: 200px;
            background: #FFF;
            margin: 40px auto;
        }
        /*box-shadow: inset horizontal vertical blur spread colour;*/
例一
制造底边阴影效果
.effect1 {
            box-shadow: 0 10px 6px -6px #777;
        }

例二

制造页脚

.effect2 {
            position: relative;
        }
        
        .effect2:before,
        .effect2:after {
            z-index: -1;
            position: absolute;
            content: "";
            bottom: 15px;
            left: 10px;
            width: 50%;
            top: 80%;
            max-width: 300px;
            background: #777;
            box-shadow: 0 15px 10px #777;
            transform: rotate(-3deg);
        }
        
        .effect2:after {
            transform: rotate(3deg);
            right: 10px;
            left: auto;
        }

例三

制造单边页脚

.effect3 {
            position: relative;
        }
        
        .effect3:before {
            z-index: -1;
            position: absolute;
            content: "";
            bottom: 15px;
            left: 10px;
            width: 50%;
            top: 80%;
            max-width: 300px;
            background: #777;
            box-shadow: 0 15px 10px #777;
            /*使显示的阴影有立体感*/
            transform: rotate(-3deg);
        }

总体效果

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style>
        .box h3 {
            text-align: center;
            position: relative;
            top: 80px;
        }
        
        .box {
            width: 70%;
            height: 200px;
            background: #FFF;
            margin: 40px auto;
        }
        /*box-shadow: inset horizontal vertical blur spread colour;*/
        
        .effect1 {
            box-shadow: 0 10px 6px -6px #777;
        }
        
        .effect2 {
            position: relative;
        }
        
        .effect2:before,
        .effect2:after {
            z-index: -1;
            position: absolute;
            content: "";
            bottom: 15px;
            left: 10px;
            width: 50%;
            top: 80%;
            max-width: 300px;
            background: #777;
            box-shadow: 0 15px 10px #777;
            transform: rotate(-3deg);
        }
        
        .effect2:after {
            transform: rotate(3deg);
            right: 10px;
            left: auto;
        }
        
        .effect3 {
            position: relative;
        }
        
        .effect3:before {
            z-index: -1;
            position: absolute;
            content: "";
            bottom: 15px;
            left: 10px;
            width: 50%;
            top: 80%;
            max-width: 300px;
            background: #777;
            box-shadow: 0 15px 10px #777;
            /*使显示的阴影有立体感*/
            transform: rotate(-3deg);
        }
        
        .effect4 {
            position: relative;
        }
        
        .effect4:after {
            box-shadow: 0 15px 10px #777;
            bottom: 15px;
            top: 80%;
            position: absolute;
            z-index: -1;
            content: "";
            width: 50%;
            background: #777;
            right: 10px;
            transform: rotate(3deg);
            max-width: 300px;
        }
        
        .effect5 {
            position: relative;
        }
        
        .effect5:before,
        .effect5:after {
            background: #777 none repeat scroll 0 0;
            bottom: 15px;
            box-shadow: 0 15px 10px #777;
            content: "";
            left: 10px;
            max-width: 300px;
            position: absolute;
            top: 80%;
            transform: rotate(-3deg);
            width: 50%;
            z-index: -1;
        }
        
        .effect4 {
            position: relative;
        }
        
        .effect4::after {
            background: #777 none repeat scroll 0 0;
            bottom: 15px;
            box-shadow: 0 15px 10px #777;
            content: "";
            max-width: 300px;
            position: absolute;
            right: 10px;
            top: 80%;
            transform: rotate(3deg);
            width: 50%;
            z-index: -1;
        }
        /*##################*/
        
        .effect5 {
            position: relative;
        }
        
        .effect5::before,
        .effect5::after {
            z-index: -1;
            position: absolute;
            box-shadow: 0 35px 20px #777;
            content: "";
            top: 80%;
            bottom: 35px;
            width: 50%;
            left: 0px;
            transform: rotate(-5deg);
            max-width: 300px;
            background: #777;
        }
        
        .effect5:after {
            right: 0px;
            left: auto;
            transform: rotate(5deg);
        }
        /*###########*/
        
        .effect6 {
            position: relative;
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            ;
        }
        
        .effect6:before,
        .effect6:after {
            content: "";
            position: absolute;
            z-index: -1;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
            top: 50%;
            bottom: 0;
            left: 10px;
            right: 10px;
            border-radius: 100px / 10px;
        }
        /*###########*/
        
        .effect7 {
            position: relative;
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
        }
        
        .effect7:before,
        .effect7:after {
            content: "";
            position: absolute;
            z-index: -1;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
            top: 0;
            bottom: 0;
            left: 10px;
            right: 10px;
            border-radius: 100px / 10px;
        }
        
        .effect7:after {
            right: 10px;
            left: auto;
            transform: skew(8deg) rotate(3deg);
        }
        /*###########*/
        
        .effect8 {
            position: relative;
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
        }
        
        .effect8:before,
        .effect8:after {
            content: "";
            position: absolute;
            z-index: -1;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
            top: 10px;
            bottom: 10px;
            left: 0;
            right: 0;
            border-radius: 100px / 10px;
        }
        
        .effect8:after {
            right: 10px;
            left: auto;
            transform: skew(8deg) rotate(3deg);
        }
    </style>

    <body>
        <div class="box effect1">
            <h3>Effect 1</h3>
        </div>
        <div class="box effect2">
            <h3>Effect 2</h3>
        </div>
        <div class="box effect3">
            <h3>Effect 3</h3>
        </div>
        <div class="box effect4">
            <h3>Effect 4</h3>
        </div>
        <div class="box effect5">
            <h3>Effect 5</h3>
        </div>
        <div class="box effect6">
            <h3>Effect 6</h3>
        </div>
        <div class="box effect7">
            <h3>Effect 7</h3>
        </div>
        <div class="box effect8">
            <h3>Effect 8</h3>
        </div>
    </body>

</html>

本文参考:https://paulund.co.uk/learn-css-box-shadow

0 条评论
发表一条评论