CSS实现渐变⾊边框（Gradientborders）的5种⽅法
给 border 设置渐变⾊是很常见的效果，实现这个效果有很多思路，今天把我所知道的⽅法罗列于此供⼤家参考。
1. 使⽤ border-image
CSS 提供了 border-image 属性⽤于给 border 绘制复杂图样，与 background-image 类似，我们可以在 border 中展⽰image和linear-gradient。
通过 border-image 设置渐变⾊ border 是最简单的⽅法，只需要两⾏代码：
CSS:
div {
border: 4px solid;
border-image: linear-gradient(to right, #8f41e9, #578aef) 1;
}
/* 或者 */
div {
border: 4px solid;
border-image-source: linear-gradient(to right, #8f41e9, #578aef);
border-image-slice: 1;
}
这种⽅式虽然简单但有个明显的缺陷，不⽀持设置 border-radius。接下来会介绍⼏种⽀持 border-radius 的⽅法。
2. 使⽤ background-image
使⽤ background-image 绘制渐变⾊背景，并且把中间⽤纯⾊遮住应该是最容易想到的⼀种⽅法，思路是：使⽤两个盒⼦叠加，给下层的盒⼦设置渐变⾊背景和 padding，给上层盒⼦设置纯⾊背景。
HTML:
<div class="border-box border-bg">
<div class="content">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste ratione
necessitatibus numquam sunt nihil quos saepe sit facere. Alias accusamus
voluptate accusantium facere fugiat animi temporibus adipisci! Corporis,
accusamus tempora.
</div>
</div>
CSS:
.border-box {
width: 300px;
height: 200px;
margin: 25px 0;
}
.border-bg {
padding: 4px;
background: linear-gradient(to right, #8f41e9, #578aef);
border-radius: 16px;
}
.content {
height: 100%;
background: #222;
border-radius: 13px; /*trciky part*/
}
这种⽅式的优点是容易理解，兼容性好，缺点是设置 content 的 border-radius 会⽐较 tricky，且不准确。
3. 两层元素、background-image、background-clip
为了解决⽅法 2 中 border-radius 不准确的问题，可以使⽤⼀个单独的元素作为渐变⾊背景放在最下层，上层设置⼀个透明的 border 和纯⾊的背景（需要设置 background-clip: padding-box 以避免盖住下层元素的 border）, 上下两层设置相同的 border-radius。
HTML:
<div class="border-box">
<div class='border-bg'></div>
<div class="content">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste ratione necessitatibus numquam sunt nihil quos
saepe sit facere. Alias accusamus voluptate accusantium facere fugiat animi temporibus adipisci! Corporis,
accusamus tempora.
</div>
</div>
CSS:
.border-box {
border: 4px solid transparent;
border-radius: 16px;
position: relative;
background-color: #222;
background-clip: padding-box; /*important*/
}
.border-bg {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
z-index: -1;
margin: -4px;
border-radius: inherit; /*important*/
background: linear-gradient(to right, #8f41e9, #578aef);
}
4. 伪元素、⽅法3的简化
我们可以使⽤伪元素替换 div.border-bg 以简化HTML结构。
HTML:
<div class="border-box">
<div class="content">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste ratione necessitatibus numquam sunt nihil quos
saepe sit facere. Alias accusamus voluptate accusantium facere fugiat animi temporibus adipisci! Corporis,
accusamus tempora.
</div>
</div>
CSS:
.border-box {
border: 4px solid transparent;
border-radius: 16px;
position: relative;
background-color: #222;
background-clip: padding-box; /*important*/
}
.
border-box::before {
content: '';
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
z-index: -1;
margin: -4px;
border-radius: inherit; /*important*/
background: linear-gradient(to right, #8F41E9, #578AEF);
}
5. 单层元素、background-clip、background-origin、background-image
最后是我觉得最优雅的⼀种⽅法，只需要⽤到单层元素，为其分别设置 background-clip、background-origin、background-image 这三个属性，每个属性设置两组值，第⼀组⽤于设置border内的单⾊背景，第⼆组⽤于设置border上的渐变⾊。
HTML:
<div class="border-box">
<div class="content">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste ratione necessitatibus numquam sunt nihil quos
saepe sit facere. Alias accusamus voluptate accusantium facere fugiat animi temporibus adipisci! Corporis,
accusamus tempora.
</div>
</div>
CSS:
.border-box {
border: 4px solid transparent;
border-radius: 16px;
background-clip: padding-box, border-box;
borderboxbackground-origin: padding-box, border-box;
background-image: linear-gradient(to right, #222, #222), linear-gradient(90deg, #8F41E9, #578AEF);
}
如果你想开发⼩程序或者了解更多⼩程序的内容，可以通过专业开发公司，来帮助你实现开发需求：-专注、APP开发、⽹站开发、H5⼩游戏开发

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