乐趣区

关于前端:CSS实现渐变色边框Gradient-borders的5种方法

jiezi

给 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，如果有其余更好的办法，欢送大家补充。

退出移动版