CSS渐变

CSS渐变

线性渐变、径向渐变、重复渐变、渐变文字

一、线性渐变（linear-gradient）

1. 均匀渐变：(默认top→bottom)

标准语法：

background: linear-gradient(yellow,orange,red,green,cyan,blue,plum) ;

效果图

2. 不均匀渐变

标砖语法：
background: linear-gradient(yellow 10%,orange 30%,red 50%,green 80%,cyan,blue,plum);
效果图：

注：
颜色后加百分比，类似PS中调色块，标注位置。
百分比：是指色标位置的百分比，0%表示起点，100%表示终点。（若有需要，也可以使用范围之外的值。）

3. 带方向的渐变：(默认top→bottom)

标准语法：(方向前加to，e.g. to left)

background: linear-gradient(to left,yellow,orange,red,green,cyan,blue,plum);

效果图：

注:
兼容语法设置的是开始方向：（e.g. left：表示left→right）

background: -webkit-linear-gradient(left,yellow,orange,red,green,cyan,blue,plum);

效果图：

4. 角度渐变（起始位置：正下方，顺时针旋转）

标准语法：

//角度为正数：
background: linear-gradient(45deg,yellow,orange,red,green,cyan,blue,plum);

效果图：

//角度为负数：
background: linear-gradient(-45deg,yellow,orange,red,green,cyan,blue,plum);

效果图：

注：

• 兼容语法：

//角度为正数：
background: -webkit-linear-gradient(45deg,yellow,orange,red,green,cyan,blue,plum);

效果图：

//角度为负数：
background: -webkit-linear-gradient(-45deg,yellow,orange,red,green,cyan,blue,plum);

效果图：

• 起始位置在正下方，顺时针旋转（标准语法）
  0deg：bottom→top；
  45deg：left-bottom→right-top;
  90deg：left→right；
  135deg：left-top→right-bottom；
  180deg：top→bottom

5. 重复线性渐变：

标准语法：

background: repeating-linear-gradient(yellow 25%,orange 50%);

效果图：

6. 带透明度渐变：

标准语法：

background: linear-gradient(rgba(154, 255, 228, 0.4), rgba(255, 165, 0, 0.73));

效果图：

二、径向渐变

注：随元素的宽高值呈现正圆或椭圆效果，可设置为正圆

1. 均匀渐变

标准语法：

background: radial-gradient(yellow,red,blue,green);

效果图：

2. 不均匀渐变

标准语法：

background: radial-gradient(yellow 20%,red,blue 50%,green);

效果图：

3. 成正圆渐变：

标准语法：

background: radial-gradient(circle,yellow,red,blue,green);

效果图：

4. 定义圆的中心点的位置：

标准语法：

background: radial-gradient(circle at 10% 20%,yellow,red,blue,green);

效果图：

• 注：兼容语法：删掉“at”关键字即可。

background: -webkit-radial-gradient(10% 30%,yellow,red,blue,green);

效果图：

5. 定义圆的大小：

css中取决于中心点距离边或者角的位置：

• 点到边：
  closest-side（最近的边）；farthest-side（最远的边）
• 点到角：
  closest-corner（最近的角）；farthest-corner（最远的角）

标准语法：

//最近的边：
background: radial-gradient(circle closest-side at 10% 30%,yellow,red,blue,green);

效果图：

//最远的边：
background: radial-gradient(circle farthest-side at 10% 30%,yellow,red,blue,green);

效果图：

//最近的角：
background: radial-gradient(circle closest-corner at 10% 30%,yellow,red,blue,green);

效果图：

//最远的角：
background: radial-gradient(circle farthest-corner at 10% 30%,yellow,red,blue,green);

效果图：

6. 重复径向渐变：

标准语法：

background: repeating-radial-gradient(yellow 10%,red,blue,green 60%);

效果图：

三、渐变文字

1.文本填充：

语法：【注意兼容性】

 background: repeating-radial-gradient(yellow 10%,red,blue,green 60%);
 -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;

效果图：

2. 文本描边（注意是居中描边）

语法：

background: repeating-radial-gradient(yellow 10%,red,blue,green 60%);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-text-stroke: 1px #333;

效果图：

3. 文本外发光【即：阴影】

text-shadow: 0 1px 4px blue;

效果图：

注：多层叠加，可制作霓虹灯效果（一般20层）