border-image實現與圓角漸變邊框例項頁面

小小强学习网發表於2024-08-05
<h4>1. 父元素圓角</h4>
<div class="father">
    <div class="border-gradient">圓角漸變邊框</div>
</div>

<h4>2. clip-path剪裁</h4>
<div class="border-gradient clip-path">圓角漸變邊框</div>

.border-gradient {
    padding: 30px;
    border-style: solid;
    border-image: linear-gradient(deepskyblue, deeppink) 20 / 10px;
}

.father {
    border-radius: 10px;
    overflow: hidden;
}
.clip-path {
    -webkit-clip-path: inset(0 round 10px);
    clip-path: inset(0 round 10px);
}

　border-image實現與圓角漸變邊框 » CSS新世界demo演示 (cssworld.cn)

相關文章