CSS实现渐变边框（border）

假如你想让元素周围有渐变的边框，我的想法是这样的：

• 没有可以直接使用的CSS API
• 我们需要制作一个具有线性渐变背景的包裹（wrapper）元素，然后一个内部元素将遮盖该背景的大部分内容，除了围绕它的细线填充。

实现代码如下：

html:

<div class="module-border-wrap">
 <div class="module">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero pariatur corporis quaerat voluptatum eos tempora temporibus nisi voluptates sed, exercitationem sequi dolore culpa incidunt accusamus, quasi unde reprehenderit ea molestias.
 </div>
</div>

CSS:

body {
  height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  background: #222;
}

.module-border-wrap {
  max-width: 250px;
  position: relative;
  background: linear-gradient(to right, red, purple);
  padding: 3px;
}

.module {
  background: #222;//设置内部的默认黑色背景
  color: white;
  padding: 2rem;
}

大家也可以使用伪元素，实现方式如下：

html：

<div class="gradient-box">
  
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent bibendum, lorem vel tincidunt imperdiet, nibh elit laoreet felis, a bibendum nisl tortor non orci. Donec pretium fermentum felis, quis aliquet est rutrum ut. Integer quis massa ut lacus viverra pharetra in eu lacus. Aliquam tempus odio adipiscing diam pellentesque rhoncus. Curabitur a bibendum est. </p>

</div>

CSS:

.gradient-box {
  
  display: flex;
  align-items: center;
  //width: 50vw;
  width: 90%;
  margin: auto;
  max-width: 22em;

  position: relative;
  padding: 30% 2em;
  box-sizing: border-box;

  $border: 5px;
  color: #FFF;
  background: #000;
  background-clip: padding-box; /* !importanté */
  border: solid $border transparent; /* !importanté */
  border-radius: 1em;

  &:before {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: -1;
    margin: -$border; /* !importanté */
    border-radius: inherit; /* !importanté */
    background: linear-gradient(to right, red, orange);
  }
}

html { height: 100%; background: #000; display: flex; }
body { margin: auto; }

如果大家不考虑border-radius，可以使用border-image，需要注意的是border-radius和border-image不兼容。

html：

<div>
  
  <div class="on-light">
    <button class="border-gradient border-gradient-purple">
      I have a gradient
    </button>
  </div>
  
  <div class="on-dark">
    <button class="border-gradient border-gradient-purple">
      I have a gradient
    </button>
  </div>
  
  <div class="on-light">
    <button class="border-gradient border-gradient-green">
      I have a gradient
    </button>
  </div>
  
  <div class="on-dark">
    <button class="border-gradient border-gradient-green">
      I have a gradient
    </button>
  </div>
  
</div>

CSS：

button {
  background: none;
  text-decoration: inherit;
  font-family: system-ui;
  font-size: 1rem;
  padding: 1rem 2rem;
}

.border-gradient {
  border-image-slice: 1;
  border-width: 2px;
}
.border-gradient-purple {
  border-image: linear-gradient(to left, #743ad5, #d53a9d);
}
.border-gradient-green {
  border-image: linear-gradient(to left, #00C853, #B2FF59);
}

body {
  height: 100vh;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  > div {
    width: 100%;
    text-align: center;
  }
  > div > div {
    width: 100%;
    padding: 1rem;
  }
}

.on-dark {
  background: #222;
  button {
    color: white;
  }
}