實現邊框的幾種方式

時間 2019-11-12

標籤實現邊框幾種方式简体版

原文原文鏈接

頁面佈局代碼

div{
    position: relative;
    width: 200px;
    line-height: 50px;
    background-color:#666666;
    color: #fff;
    margin-left: 20px;
    margin-top: 20px;
    box-sizing: border-box;
}
<body>
    <div class="bl">一我的去拉薩</div>
</body>

利用 border屬性

.bl{
        border-left: 3px solid #000000;
    }

利用僞元素實現

.bl::after{
        position: absolute;
        top: 0;
        left: 0;
        content: '';
        display: block;
        width: 3px;
        height: 100%;
        background-color: #000000;
    }

利用box-shadow陰影屬性

.bl{
        box-shadow: -3px 0px 0 0 #000000;
    }

利用filter 濾鏡實現

.bl{
        filter: drop-shadow(-3px 0px 0px #000000);
    }

利用背景顏色漸變

.bl{
        background-image:linear-gradient(90deg,#000000 0px, #000000 5px,transparent 5px)
    }

相關標籤/搜索