实现渐变背景、文字、边框

写在前面

CSS 一直以来都是本人比较薄弱的点，当前的各种框架各种 UI 库都很好地封装了样式。难得遇上需要自己写样式，也查了一些资料，记录下来，方便日后遇到同样问题再进行查看。
而此次的需求，是需要实现以下效果：


这里既有了文字渐变、也有背景渐变以及输入框边框的颜色渐变。因此将从这三个方面实现不同渐变的需求。

渐变背景

渐变背景采用 CSS3 的线性渐变，更多的渐变方式可查看文档：
菜鸟教程-渐变

背景渐变代码：

#grad1 {
  height: 200px;
  background-image: linear-gradient(to right, green, blue); 
}

而效果如下：

其中 linear-gradient 的语法为：

linear-gradient(direction, color-stop1, color-stop2, ...);

其中 direction 为方向，可以传 to bottom、to top、to right、to left、to bottom right 等，此外还可以传角度，而角度是指水平线和渐变线之间的角度，逆时针方向计算。比如，0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变。

color-stopN 则意味着渐变的不同色值，除了传色值外，每个色值后面还可添加一个百分比数值，用于表示指定颜色的标准中心线位置，百分比之间是过渡色，如果百分比位置之间有重叠会失去渐变过渡色。如：

#grad1 {
  height: 200px;
  background-image: linear-gradient(to right, green 0%, red 10%, yellow 30%, blue 100%); 
}

效果图：

以上是对背景渐变的简单学习。

而以下的一切渐变都可基于渐变背景而言。

渐变文字

#grad1 {
  font-size: 60px;
  background-image: linear-gradient(to bottom, green, red); 
  -webkit-background-clip: text;
  color: transparent;
}

效果图：

文字渐变方式与背景渐变的差异在于代码中的后两行，一个设置背景渐变方式作用在文字上，一个设置文字颜色为透明，这样背景色的渐变就能出现在文字上，出现上图效果。

渐变边框

普通边框

边框的渐变样式，也可使用 linear-gradient 进行处理：

#grad1 {
  border: 10px solid transparent;
  border-image: linear-gradient(to right, green, blue);
  border-image-slice: 10;
}

效果图：

上述代码中的 border-image-slice 如果不设置的话，会出现以下的情况：

border-image-slice 属性指定顶部，右，底部，左边缘的图像向内偏移，分为九个区域：四个角，四边和中间。图像中间部分将被丢弃（完全透明的处理），除非填写关键字 fill。
可参考文档：
border-image-slice 文档

但是上述的边框渐变，在设置 border-radius 后并不会生效：

圆角边框

但是从别的方式来实现圆角边框，就可以在父元素背景为渐变色时，子元素稍小一点，给人以边框的感觉。如下：

#grad1 {
  width: 202px;
  height: 32px;
  box-sizing: border-box;
  padding: 1px;
  border-radius: 16px;
  background-image: linear-gradient(to right, green, blue);
}
	
#input {
  width: 200px;
  height: 30px;
  border-radius: 15px;
  background-color: white;
  color: white;
  font-size: 14px;
}

效果图：

到此为止，需求都已满足了，也学到了很多东西。

后记

毕竟 CSS 写的不多，有什么不对的地方，还请各位大佬指正~