纯小白的一些渐变色使用

85 阅读1分钟

0.gif

文字渐变色

文字渐变色有很多种方法,这里只介绍一种,使用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

  1. 将文字的颜色调成透明的就好了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;