border-image实现与圆角渐变边框实例页面

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

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