前端工作中常用Css(渐变)

渐变

一、线性渐变（向上/向下/向左/向右/对角线）

background-image: linear-gradient( 方向/角度 , 颜色1，颜色2，颜色3....);

注： 方向： 在关键字 to 后面加上 top、bottom、right、left 中的某一个关键字或多个关键字。
例：

background-image: linear-gradient(to right bottom , #FF0000,#FFF200, #1E9600);

重复线性渐变：repeating-linear-gradient()

background-image: repeating-linear-gradient(45deg, #210f60 10px, #fff 30px, #333 10px);

二、径向渐变（由其中心定义）

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

shape 为椭圆形，size 为最远角，position 为中心。
shape 参数定义形状。它可接受 circle 或 ellipse 值。默认值为 ellipse（椭圆）
size 参数定义渐变的大小。它可接受四个值：
closest-side ：从中心点向外扩展渐变，到离中心点最近的一边结束。
farthest-side ：以离渐变中心点最远的那一边计算圆的半径
closest-corner ：以离渐变中心点最近的元素顶角计算渐变的范围。
farthest-corner ：以离渐变中心点最远的顶角计算圆的半径。

background-image: radial-gradient(circle at 50% 50%, red, yellow, green);

平铺的径向渐变：repeating-radial-gradient

background-image: repeating-radial-gradient(circle at 20% 40%,#eea2a2 20px, #57c6e1 20px, #b49fda 40px, #7ac5d8 40px, #b49fda 80px);

常见使用：

1. 边框渐变：

.border-grident {
  margin-top: 20px;
  width: 200px;
  height: 100px;
  border: 4px solid;
  border-image: linear-gradient(to right, #8f41e9, #578aef) 4;
}

2. 文字渐变：

font-size: 20px;
background-image: linear-gradient(180deg, #fffcbf 0%, #ffb438 100%);
background-clip: text;
-webkit-background-clip: text;
color: transparent;

最后

本文介绍了几种CSS常用的渐变方式，希望对你有所帮助！！