css伪类实现个性化边框

作者: 放下手机出来嗨 | 来源:发表于2019-06-06 10:54 被阅读0次

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>边框</title>
        <style>
            .border1{
                width: 300px;
                height: 300px;
                border: 4px solid #F3692B;
                margin: auto;
                border-left-width: 10px;
                border-top-left-radius: 50px;
                position: relative;
            }
            .border1:after{
                content: '';
                width: 100%;
                height: 10px;
                bottom: 0;
                left: -10px;
                box-shadow: 0px 10px 0px #F3692B;
                position: absolute;
            }
            .border2{
                width: 300px;
                height: 300px;
                border: 4px solid #F58C0F;
                margin: auto;
                border-top-right-radius: 50px;
                position: relative;
                box-shadow: -10px 10px 0px #FF881A;
                                margin-top: 100px;
            }
        </style>
    </head>
    <body>
        <div class="border1"></div>
        <div class="border2"></div>
    </body>
</html>