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层)