CSS实现渐变圆⾓边框
渐变边框可以使⽤ border-image，但带有圆⾓的渐变边框单靠 border-image却⽆法实现，那有哪些⽅法可以实现 圆⾓渐变边框呢？⽅案⼀：使⽤border-image+clip-path实现
<style>
.radius-gradient-border1{
max-width: 300px;
padding: 8px;
border: 5px solid transparent;
border-image: linear-gradient(90deg, #387EE8, #f60) 1;
border-radius: 5px;
margin-bottom: 20px;
color: #f60;
background-color: rgba(255,255,255,0.5);
clip-path: inset(0 0 round 5px);
}
</style>
<div class="radius-gradient-border1">
<p>border-image</p>
+
<p>clip-path</p>
实现
div border属性
</div>
优点是内容背景可以透明
⽅案⼆：background-image+background-clip实现
padding: 0;
border-radius: 5px;
border: 5px solid transparent;
margin-bottom: 20px;
color: #f60;
/* 这⾥需要设置两个背景，第⼀个背景是内容区域的⽩⾊背景，另⼀个是实现渐变边框的背景 */    background-image: linear-gradient(#fff, #fff), linear-gradient(90deg, #387EE8, #f60);
/
* 设置背景图标的坐标原点为border-box区域的左上⾓，因为我们希望背景可以渗透到边框处，因此需要从边框处开始裁切，因此需要设置为border-box，默认为padding-box的左上*/
background-origin: border-box;
/* 背景裁切的时候，第⼀个背景需要从内容区域开始裁切，因此设置为content-box；
第⼆个背景需要作为渐变边框，因此需要从边框处开始裁切 */
background-clip: content-box, border-box;
}
</style>
<div class="radius-gradient-border2">
<p> background-image </p>
+
<p>background-clip</p>
实现
</div>
缺点：
内容背景不能半透明
实现复杂
不能使⽤padding
⽅案三：border-image+overflow: hidden实现
border-radius: 5px;
margin-bottom: 20px;
overflow: hidden;
}
.radius-gradient-border3 .inner{
padding: 8px;
border: 5px solid transparent;
border-image: linear-gradient(90deg, #387EE8, #f60) 1;
color: #f60;
background-color: rgba(255,255,255,0.7);
}
</style>
<div class="radius-gradient-border3">
<div class="inner">
<p>border-image</p>
+
<p>overflow: hidden</p>
实现
</div>
</div>
缺点：需要多嵌套⼀层⽗元素，并且还需要设置overflow: hidden;⽅案四：background-image+⽗div实现
<style>
.radius-gradient-border4{
max-width: 300px;
padding: 5px;
border-radius: 5px;
background-image: linear-gradient(90deg, #387EE8, #f60);
}
.radius-gradient-border4 .inner{
background-color: rgba(255,255,255,0.7);
}
</style>
<div class="radius-gradient-border4">
<div class="inner">
<p>background-image</p>
+
<p>⽗div</p>
实现
</div>
</div>
这个缺点和⽅案三⼀样

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。