border-image一探究竟

[Jenna-u]

前言

边框带渐变效果，如果是你，你的策略是什么？这是今天公司同事问我的一个问题。
效果长这样：

解决思路

想想可以实现的几种方案：

1. css的box-shadow去实现
2. css的border-image
3. css的linear-gradient()背景渐变，再用伪元素往上叠一层

实现

box-shadow是实现不了的，因为阴影每条边的颜色是单色的，最多可以改变一下透明度,所以这条被pass。ps:(完全属于对语法和API不熟练啊。。。)

border-image我们来好好说一下，这个border-image属于在元素的边框上绘制图像。这使得绘制复杂的边框图像变得更简单了。自带图片裁剪，可以重复填充图像，支持渐变填充。用法如下：

/*渐变*/
border-image: linear-gradient(yellow, orange) 30;

/*图片*/
border-image: url('/media/examples/border-diamonds.png') 30;

/*重复渐变*/
border-image: repeating-linear-gradient(30deg, #4d9f0c, #9198e5, #4d9f0c 20px) 60;

border-image 定义和用法

border-image是个简写属性，用于设置以下属性：

• border-image-source: 用于声明元素边框图片的资源
• border-image-slice: 用于边框图片的区域分割
• border-image-width: 定义图像边框宽度。如大于指定的border-width则向内部扩展
• border-image-outset: 定义边框图像可超出边框盒的大小
• border-image-repeat: 定义图片如何填充边框。或为单个值，设置所有的边框；或为两个值，分别设置水平与垂直的边框。

如果你愿意抠细节，不愿用图片代替，为了减少向服务器请求，就要用代码实现图片上的效果：

.box {
  width: 124px;
  height: 40px;
  color: #2ED184;
  text-align: center;
  line-height: 40px;
  border-radius: 100px;
  border-style: solid;
  -moz-border-image: linear-gradient(#10DD77, #33A3FD) 10;
  -webkit-border-image: linear-gradient(#10DD77, #33A3FD) 10;
  border-image: linear-gradient(#10DD77, #33A3FD) 10;
}

效果如下:

边框渐变实现了，但是圆角没出来呀😭

这是为什么呢？

因为border-image不支持圆角属性。因为它本身就可以通过引入图片的形式实现各种类型边框。所以不需要再用圆角了。

下面我们用第三种方案来实现一下这个效果：

.box {
  width: 124px;
  height: 40px;
  color: #2ED184;
  text-align: center;
  line-height: 40px;
  border-radius: 100px;
  background-image: linear-gradient(#33A3FD, #10DD77);
  background-clip: padding-box;
  position: relative;
  z-index: 1
}

.box::after {
  content: '';
  position: absolute;
  width: 120px;
  height: 36px;
  top: 2px;
  left: 2px;
  background: #fff;
  z-index: -1;
  border-radius: 100px;
} 

效果长这样：

为了力求完美，渐变的角度不太对，我们来调整一下：

/*从左到右渐变*/
background-image: linear-gradient(to left #33A3FD, #10DD77);

参考：

1. https://stackoverflow.com/questions/5706963/possible-to-use-border-radius-together-with-a-border-image-which-has-a-gradient
2. https://developer.mozilla.org/en-US/docs/Web/CSS/border-image