CSS 神奇的border（三）-优快云博客

本文链接：https://blog.youkuaiyun.com/ALISURE/article/details/48597413

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图

<!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>