CSS 神奇的border（三）

CSS圆形渐变效果

最新推荐文章于 2022-08-23 17:44:11 发布

原创最新推荐文章于 2022-08-23 17:44:11 发布 · 626 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#CSS #border

CSS 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一种使用CSS实现的特殊圆形渐变效果，并详细解释了如何通过不同层级的伪元素叠加来创建独特的视觉效果。从基本的布局到复杂的阴影应用，逐步展示了每一步的效果。

效果图

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            float: left;
            margin: 10px;
        }
        .style{
            border: 100px solid;
            border-color: #67679a #67679a #bcbcbc #bcbcbc;
            position: relative;
        }
        .style:before,
        .style:after{
            position: absolute;
            content: "";
            display: block;
        }
        .style:before{
            border: 50px solid #bcbcbc;
            border-radius: 50%;
            left: -85.7px;
            top: -85.7px;
            box-shadow: 71px 71px 0 #67679a;
        }
        .style:after{
            border: 20px solid #67679a;
            border-radius: 50%;
            left: -56px;
            top: -56px;
            box-shadow: 71px 71px 0 #bcbcbc;
        }
        .style-1{
            border-radius: 0%;
        }
        .style-2{
            border-radius: 10%;
        }
        .style-3{
            border-radius: 20%;
        }
        .style-4{
            border-radius: 30%;
        }
        .style-5 {
            border-radius: 40%;
        }
        .style-6 {
            border-radius: 50%;
        }

        .step-1{
            border: 100px solid;
            border-color: #67679a #67679a #bcbcbc #bcbcbc;
            position: relative;
        }
        .step-2:before{
            position: absolute;
            content: "";
            display: block;
            border: 50px solid #bcbcbc;
            border-radius: 50%;
            left: -85.7px;
            top: -85.7px;
            box-shadow: 71px 71px 0 #67679a;
        }
        .step-3:after{
            position: absolute;
            content: "";
            display: block;
            border: 20px solid #67679a;
            border-radius: 50%;
            left: -56px;
            top: -56px;
            box-shadow: 71px 71px 0 #bcbcbc;
        }
    </style>
</head>
<body>
    <div class="style style-1"></div>
    <div class="style style-2"></div>
    <div class="style style-3"></div>
    <div class="style style-4"></div>
    <div class="style style-5"></div>
    <div class="style style-6"></div>

    <div class="step-1"></div>
    <div class="step-1 step-2"></div>
    <div class="step-1 step-2 step-3"></div>
</body>
</html>