css中可以进行背景的渐变,通常来说,我们使用的是下面两种渐变

线性渐变
径向渐变
线性渐变
先来看一下语法:
linear-gradient( [ <angle> | to <side-or-corner> ,]? <color-stop-list> )
\---------------------------------/ \----------------------------/ Definition
of the gradient line List of color stops
解释一下:

angle> 角度值指定渐变的方向(或角度)。
side-or-corner渐变线的起始点位置。它包含to和两个关键词:第一个指出水平位置left or right, 第二个指出垂直位置top or
bottom。关键词的先后顺序无影响,且都是可选的。
color-stop 由一个color值组成,并且跟随着一个可选的终点位置(可以是一个百分比值或者是沿着渐变轴的length)

于是我们有了下面的效果:

这是一个从左到右的金色到粉色的线性渐变
background-image: linear-gradient(to right, gold, pink)
径向渐变
先来看下语法:
radial-gradient( [ [ circle || <length> ] [ at <position> ]? , | [ ellipse ||
[ <length> | <percentage> ]{2} ] [ at <position> ]? , | [ [ circle | ellipse ]
|| <extent-keyword> ] [ at <position> ]?, | at <position> , ]? <color-stop> [ ,
<color-stop> ]+)
或者我们可以简化成下面这样:
radial-gradient(shape size position, color-stop[...,color-stop]);
解释一下:

position 径向渐变的圆心位置
shape 渐变的形状。圆形(渐变的形状是一个半径不变的正圆)或椭圆形(轴对称椭圆)。默认值为椭圆
size 渐变的尺寸大小
color-stop 由一个color值组成,并且跟随着一个可选的终点位置(可以是一个百分比值或者是沿着渐变轴的

于是我们有了下面的效果:

这是一个红色到黑色的径向渐变
background-image: radial-gradient(red,black)
渐变的花式玩法
当然上面的渐变是非常简单的玩法,下面我们整点高难度的~

颜色突变

我们当前做的渐变是一个均匀的渐变,如果多个颜色具有相同的位置,那么这些颜色就会在一个无限小的过渡区域进行过渡,从视觉上看,颜色在该位置就会突然变化,而不是一个平滑的过渡效果。

就像这样

背景的多个属性配合
渐变可以当背景图去处理,既然是背景图,那么就可以进行叠加和平铺,于是我们得到了下面的效果:

这是两个渐变叠加配合背景图平铺实现的效果
background-image: linear-gradient(rgba(255,0,0,0.5) 50% ,transparent 50%),
linear-gradient(to right,rgba(255,0,0,0.5) 50% , #fff 50% ); background-size:
50px 50px;
我们也可以用重复线性渐变进行叠加操作:

background-image: repeating-linear-gradient(-45deg, transparent, transparent
25%, tomato 0, tomato 50%), repeating-linear-gradient(45deg, transparent,
transparent 25%, dodgerblue 0, dodgerblue 50%), wheat; ​ background-size: 50px
50px;
再加上亿点细节~ (background-blend-mode: multiply; 正片叠底效果)

就是这个样子啦!Ta Da!

渐变色的文字!
-webkit-background-clip:text 这个属性可以将背景色裁剪到文字中,然后我们先这样再这样最后那样就得到一个很棒的渐变色的文字!

color: transparent; background: repeating-linear-gradient(-45deg, transparent,
transparent 25%, tomato 0, tomato 50%), repeating-linear-gradient(45deg,
transparent, transparent 25%, dodgerblue 0, dodgerblue 50%), wheat;
background-size: 50px 50px; background-blend-mode: multiply;
-webkit-background-clip: text;
渐变的边框
利用border-image-source 属性可以把渐变放在边框中,像这样:

border: 20px solid; border-image-source: repeating-linear-gradient(-45deg,
cyan 0, cyan 15px, transparent 15px, transparent 30px, tomato 30px, tomato 45px,
transparent 45px, transparent 60px); border-image-slice: 20;

技术
友情链接
码工具
Toolsou
API参考文档
云服务器优惠
阿里云优惠券
腾讯云优惠券
华为云优惠券
站点信息
问题反馈
邮箱:ixiaoyang8@qq.com
QQ群:766591547
关注微信