css渐变分为:1.线性渐变(linear-gradient)
2.径向渐变(radial-gradient)
3.圆锥渐变(conic-gradient)
其中线性渐变与径向渐变还可以使用repeating-linera-gradient、repeating-radial-gradient来创建重复渐变。
一、线性渐变
![](https://img.haomeiwen.com/i18912198/1b623e429249a096.png)
基础线性渐变:要创建最基本的渐变类型,您只需指定两种颜色即可。 这些被称为色标。 至少指定两个色标,也可以指定任意数量。默认从上到下。
![](https://img.haomeiwen.com/i18912198/02d942dff56a7ae0.png)
设置值将渐变的中心点移动到指定位置:
![](https://img.haomeiwen.com/i18912198/383831d7fdf843c8.png)
指定值改变渐变的方向:
![](https://img.haomeiwen.com/i18912198/b1a0b4c4905fdbe7.png)
对角线渐变:
![](https://img.haomeiwen.com/i18912198/27ade5ff669e2982.png)
设置渐变角度,精确控制渐变方向:
![](https://img.haomeiwen.com/i18912198/5a6e9c68e5c6cb8c.png)
使用多种颜色的渐变:
![](https://img.haomeiwen.com/i18912198/5ad0fc33f78359fd.png)
多种颜色渐变设置渐变停止的位置:
![](https://img.haomeiwen.com/i18912198/6f93530f7af820d5.png)
在渐变颜色间创建实线(分割线):
![](https://img.haomeiwen.com/i18912198/ea75a0c77c9c5568.png)
两种对比效果:
![](https://img.haomeiwen.com/i18912198/eb9b7be128e0f7a9.png)
支持背景堆叠和透明度:
![](https://img.haomeiwen.com/i18912198/5fdda7022d8e14fd.png)
渐变堆叠渐变:
![](https://img.haomeiwen.com/i18912198/e3fd8a7954e25951.png)
重复线性渐变:
![](https://img.haomeiwen.com/i18912198/608f855ac6cd2919.png)
二、径向渐变
大致与线性类似。
![](https://img.haomeiwen.com/i18912198/3d3c820d9a4484a5.png)
![](https://img.haomeiwen.com/i18912198/6ce3f68bf653f42c.png)
![](https://img.haomeiwen.com/i18912198/c2398a9cba0bf793.png)
![](https://img.haomeiwen.com/i18912198/bba0f2e02d295bc1.png)
![](https://img.haomeiwen.com/i18912198/38872ab550b0a776.png)
![](https://img.haomeiwen.com/i18912198/c6d5b4c4c3752bd1.png)
三、圆锥渐变(不常见)
![](https://img.haomeiwen.com/i18912198/9457808f02976672.png)
网友评论