文字渐变色
文字渐变色有很多种方法,这里只介绍一种,使用clip截取
- 文字渐变也是用
background-image:
- 不过需要使用到
background-clip:border-box|padding-box|content-box;
规定背景的绘制区域
值 | 描述 |
---|---|
border-box | 背景被剪裁到边框 |
padding-box | 背景被剪裁到内边距框 |
content-box | 背景被剪裁到内容框 |
我们需要用到的是
-webkit-background-clip: text;
看到-webkit前缀很明显这是有兼容问题的 当然了觉得这方法不行还有很多的方法,css博大精深,还可以使用-webkit-mask
等
- 将文字的颜色调成透明的就好了
color: transparent;
HTML
<h1>重生之我是马建龙</h1>
CSS
h1{
background: linear-gradient(90deg, #2EB086, #8B9A46, #612897, #2EB086);
-webkit-background-clip: text;
color: transparent;
}
渐变色画一条线
画一条线很简单的,有手就行
- 直接调整方向,以及两端各加一个浅色就好了
background: linear-gradient(to right, white,#00FF0A,white);
height: 2px;