CSS 神奇的border（一）

最新推荐文章于 2024-06-25 15:10:09 发布

alisure

最新推荐文章于 2024-06-25 15:10:09 发布

阅读量512

点赞数

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

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

版权

CSS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

效果图

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            width: 50px;
            height: 50px;
            margin: 20px;
            float: left;
            background-color: #67679a;
            border: 25px solid #bcbcbc;
        }
        .style-1{
            border-top-color: transparent;
        }
        .style-2{
            border-top-color: transparent;
            border-bottom-color: transparent;
        }
        .style-3{
            border-right-color: transparent;
            border-bottom-color: transparent;
            border-left-color: transparent;
        }
        .style-4{
            width: 0px;
            height: 0px;
            border-right-color: transparent;
        }
        .style-5{
            width: 0px;
            height: 0px;
            border-top-color: transparent;
            border-bottom-color: transparent;
        }
        .style-6{
            width: 0px;
            height: 0px;
            border-radius: 50px;
            border-top-color: transparent;
            border-right-color: transparent;
        }
        .style-7{
            width: 0px;
            height: 0px;
            border-radius: 50px;
        }
        .style-8{
            width: 0px;
            height: 0px;
            border-radius: 50px;
            border-top-color: transparent;
        }
        .style-9{
            width: 0px;
            height: 0px;
            border-radius: 50px;
            border-top-color: transparent;
            border-right-color: transparent;
            border-bottom-color: transparent;
        }
        .style-10{
            border-radius: 50px;
            width: 0px;
            height: 0px;
            border-left-width: 80px;
            border-top-color: transparent;
            border-bottom-color: transparent;
        }
        .style-11{
            width: 0px;
            height: 0px;
            border-top-color: transparent;
            border-right-color: transparent;
            border-bottom-color: transparent;
        }
        .style-12{
            width: 0px;
            height: 0px;
            border-left-width: 36px;
            border-top-color: transparent;
            border-right-color: transparent;
            border-bottom-color: transparent;
        }
        .style-13{
            width: 0px;
            height: 0px;
            border-left-width: 80px;
            border-top-color: transparent;
            border-bottom-color: transparent;
        }
        .style-14{
            width: 0px;
            height: 0px;
            border-right-color: transparent;
            border-bottom-color: transparent;
            border-left-color: transparent;
        }
        .style-15{
            width: 0px;
            height: 0px;
            border-left-width: 48px;
            border-right-color: transparent;
            border-bottom-color: transparent;
            border-left-color: transparent;
        }
        .style-16{
            width: 0px;
            height: 0px;
            border-top-color: transparent;
            border-right-color: transparent;
        }
        .style-17{
            width: 200px;
            border-radius: 50px;
        }
        .style-18{
            border-left-width: 80px;
            border-radius: 50px;
        }
        .style-19{
            border-radius: 50px;
            border-top-color: transparent;
            border-right-color: transparent;
        }
        .style-20{
            border-radius: 50px;
        }
    </style>
</head>
<body>
    <div class="style-1"></div>
    <div class="style-2"></div>
    <div class="style-3"></div>
    <div class="style-4"></div>
    <div class="style-5"></div>
    <div class="style-6"></div>
    <div class="style-7"></div>
    <div class="style-8"></div>
    <div class="style-9"></div>
    <div class="style-10"></div>
    <div class="style-11"></div>
    <div class="style-12"></div>
    <div class="style-13"></div>
    <div class="style-14"></div>
    <div class="style-15"></div>
    <div class="style-16"></div>
    <div class="style-17"></div>
    <div class="style-18"></div>
    <div class="style-19"></div>
    <div class="style-20"></div>
    </body>
</html>