共计 3354 个字符,预计需要花费 9 分钟才能阅读完成。
给 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;
}
Codepen demo
这种形式尽管简略但有个显著的缺点,不反对设置 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*/
}
Codepen demo
这种形式的长处是容易了解,兼容性好,毛病是设置 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);
}
Codepen demo
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);
}
Codepen demo
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;
background-origin: padding-box, border-box;
background-image: linear-gradient(to right, #222, #222), linear-gradient(90deg, #8F41E9, #578AEF);
}
Codepen demo
目前就能想到这 5 种办法,集体举荐优先应用 4 和 5,如果有其余更好的办法,欢送大家补充。