css实现渐变色的边框

公司想要重构某某系统，新来的视觉妹子不知道哪里学来的技能，说是喜欢渐变色，视觉稿用了很多渐变的能力，普通的那种框框渐变还好说，linear-gradient或者radial-gradient都可以完成，可是她说，外框也得渐变，渐变的外框多好看，像下面这样子的：

PS：视觉妹子不仅外框要渐变，svg图标也想渐变~~

为了维护良好的同事关系，我果断接下了这个任务。边框想要渐变，那用单纯的boder属性肯定是不行的了，看了下蓝湖的推荐写法是：

1width: 466px;
2height: 48px;
3background: #494C69;
4border-radius: 8px 8px 8px 8px;
5border: 2px solid;
6border-image: radial-gradient(circle, rgba(86, 183, 253, 1), rgba(171, 231, 210, 1)) 2 2;

好好，看看这次蓝湖靠不靠谱，代码里一设置，成这样子了：

边框渐变是出来了，但是我的border-radius貌似没了。

看来没满足需求，再找找别的方案。

最后在这篇文章上找到了答案：CSS实现渐变色边框（Gradient borders）的5种方法

果然社区的力量是巨大的，最后我们采用了第五种方法，最简单，也不需要阴影额外元素：

1{
2	background-image: linear-gradient(#494c69, #494c69), linear-gradient(#57bcf7, #abe7d2);
3	background-clip: padding-box, border-box;
4	background-origin: border-box;
5	border: 1px solid transparent;
6}

PS：最后这种写法其实还有一个问题是，如果中间内容的背景色是透明的话，整体效果就实现不出来的，就像下面这样：

那为什么这个写法就可以得到渐变色的外框呢？

background-image属性就不多说了吧，给元素放上一张背景图片，应用两个渐变叠加，第一个渐变其实不算渐变，颜色设置一样，相当于做了个背景色，所以background-image的配置等价于下面这个：

1background-color: #494c69
2background-image: linear-gradient(#57bcf7, #abe7d2);

那关键的另外两个属性：background-clip和background-origin。

background-origin: border-box; 是 CSS 中用来指定背景图像的起始位置的属性之一。

这个属性有三个可能的值：

1. padding-box：背景图像的起始位置从边框外边缘开始。
2. border-box：背景图像的起始位置从边框内边缘开始。
3. content-box：背景图像的起始位置从内容框的内边缘开始。

background-origin: border-box; 意味着背景图像从元素的边框内边缘开始显示，这个配置可以理解，毕竟我们的整体效果就是从border开始的。那background-clip这个呢？

background-clip 属性用于控制背景图像的绘制区域，而且可以指定多个值，用逗号分隔。

background-clip: padding-box, border-box; 指定了两个值，分别是 padding-box 和 border-box。

• padding-box：背景图像将被裁剪到内边距框的边界。
• border-box：背景图像将被裁剪到边框框的边界。

这意味着背景图像将被裁剪到内边距框和边框框之间的区域，并且不会延伸到外边框之外。

经过这么解释，可以理解为啥渐变的边框可以出现，就是设置了一张渐变色的背景图片，然后进行裁剪，裁剪成只剩边框的图片，于是就出现了我们想要的效果。

最终，和谐的同事关系终于保留住了~