CSS 神奇的border（三）

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

alisure

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

阅读量563

点赞数

分类专栏： CSS 文章标签： CSS border

本文链接：https://blog.csdn.net/ALISURE/article/details/48597413

版权

CSS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

效果图

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