css渐变色的一些使用

渐变色的有很多种的玩法，这里暂时只说一点点，很少写博客(不喜勿喷)！！！

文字渐变色

文字渐变色有很多种方法，这里只介绍一种，使用clip截取

1. 文字渐变也是用background-image:
2. 不过需要使用到background-clip:border-box|padding-box|content-box;规定背景的绘制区域

值	描述
border-box	背景被剪裁到边框
padding-box	背景被剪裁到内边距框
content-box	背景被剪裁到内容框

我们需要用到的是-webkit-background-clip: text;看到-webkit前缀很明显这是有兼容问题的
当然了觉得这方法不行还有很多的方法，css博大精深，还可以使用-webkit-mask等

4. 将文字的颜色调成透明的就好了color: transparent;

HTML
<h1>重生之我是马建龙</h1>

CSS
h1{
    background: linear-gradient(90deg, #2EB086, #8B9A46, #612897, #2EB086);
    -webkit-background-clip: text;
    color: transparent;
}

渐变色画一条线

画一条线很简单的，有手就行

1. 直接调整方向，以及两端各加一个浅色就好了

background: linear-gradient(to right, white,#00FF0A,white);
height: 2px; 

渐变色的背景

background-image: linear-gradient(to top, #fad0c4 0%, #fad0c4 1%, #ffd1ff 100%);
background: linear-gradient(to top, #3a1c71, #d76d77, #ffaf7b);