css-background实现渐变边框

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第5天，点击查看活动详情

前言

在 CSS 中， border 属性并不支持渐变方法的使用，所以大部分边框都是纯色的。

然而，有时开发需求就是要求 div 边框必须要渐变的，而且中间部分要透明(transparent)，方便显示背景图片。

本来还想着使用其他元素模拟边框，或者根据图片来实现。后来发现使用 background-image、background-size、 background-position 基本就可以实现。

效果

基本思路

1. background-image 能够使用 CSS 提供的渐变函数 linear-gradient，用于实现渐变背景的效果。
2. background-size 能够调整背景的大小，可以借用它将 background-image 中定义的背景设置为边框的大小。
3. background-position 能够调整背景的位置，用它将 background-image 中定义的背景设置到边框的位置上。

通过上面方法，基本上就可以实现一条渐变的边框，如此重复四次，依次将四条边框实现出来。

最后使用 padding 规定内容的显示区域，防止内容与使用 background 实现出来的边框重叠。

代码实现

首先，实现一个常规的 box，代码如下，为了方便区分，先设定 box 的背景为 #000：

<div id="app">
  <div class="box">
  </div>
</div>

#app {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #6b7280;
  display: flex;
  align-items: center;
  justify-content: center;
}

.box {
  position: relative;
  width: 200px;
  height: 150px;
  background-color: #000;
}

基本效果：

黑色区域就是定义好的 box，现在就是给这个黑色的 box 添加一个渐变的边框，边框一共由上下左右四条渐变的“直线”组成，先从右边的渐变“直线”开始。

先给 box 添加一个渐变的背景，右边的边框是从下往上，白色逐渐变的透明：

.box {
  position: relative;
  width: 200px;
  height: 150px;
  background-color: #000;
  background-image: linear-gradient(to top, #fff, transparent);
}

然后设置这个渐变的大小，因为这是右边的边框，所以高度必须是 box 的 100% 高度，宽度就是边框的宽度，这里是1px。

如果设定的背景规格小于 box 的大小，默认是会使用平铺铺满的，这里并不需要，所以同时，也要将平铺关闭：

.box {
  position: relative;
  width: 200px;
  height: 150px;
  background-color: #000;
  background-image: linear-gradient(to top, #fff, transparent);
  background-repeat: no-repeat;
  background-size: 1px 100%;
}

可以看到，在 box 左边已经有了一条白色渐变的边框了，但它的位置应该是右边才对，此时就需要再通过 background-position 设定位置，因为是在右边，所以 x轴 偏移量必须是 100%:

.box {
  position: relative;
  width: 200px;
  height: 150px;
  background-color: #000;
  background-image: linear-gradient(to top, #fff, transparent);
  background-repeat: no-repeat;
  background-size: 1px 100%;
  background-position: 100% 0;
}

可以看到，白色渐变的边框现在是在右边了，使用相同的思路将剩下三条边框实现出来，然后将 box 背景颜色设置为透明即可，详见效果展示。