CSS - 容器背景 10 种颜色渐变Demo（linear-gradient()）

朴灿烈づ我的快乐病毒、 2023-03-03 15:24 2阅读 0赞

## 语法 ##

background: linear-gradient(direction,color-stop1,color-stop2,...);

*  `direction`：用角度值指定渐变的方向（或角度）。
 *  `color-stop1,color-stop2,...`：用于指定渐变的起止颜色。

> 注意：至少需要两种颜色。

## 第一个 ##

background: linear-gradient(to left,#d3959b,#bfe6ba);

`to left` 设置渐变 **从右到左**，相当于 `270deg`。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5ODk2NQ_size_16_color_FFFFFF_t_70]

## 第二个 ##

background: linear-gradient(to right,#d3959b,#bfe6ba);

`to right` 设置渐变 **从左到右**，相当于 `90deg`。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5ODk2NQ_size_16_color_FFFFFF_t_70 1]

## 第三个 ##

background: linear-gradient(to top,#d3959b,#bfe6ba);

`to top` 设置渐变 **从下到上**，相当于 `0deg`。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5ODk2NQ_size_16_color_FFFFFF_t_70 2]

## 第四个 ##

background: linear-gradient(to bottom,#d3959b,#bfe6ba);

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5ODk2NQ_size_16_color_FFFFFF_t_70 3]

## 第五个 ##

background: linear-gradient(to top right,#d3959b,#bfe6ba);

`to right top = to top right` ：从左下角到 **右上角，对角线角度**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5ODk2NQ_size_16_color_FFFFFF_t_70 4]

## 第六个 ##

background: linear-gradient(45deg,#d3959b,#bfe6ba);

和 `to top right` 有细微差别（背景为正方形的时候无差别）。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5ODk2NQ_size_16_color_FFFFFF_t_70 5]

## 第七种 ##

background: linear-gradient(45deg,#d3959b 20%,#bfe6ba);

用百分比指定起始颜色的位置，默认值为 `0%`。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5ODk2NQ_size_16_color_FFFFFF_t_70 6]

## 第八种 ##

background: linear-gradient(to right,#feac5e,#c779d0,#4bc0c8);

![在这里插入图片描述][20200731200530462.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5ODk2NQ_size_16_color_FFFFFF_t_70 7]

## 第九种 ##

background: linear-gradient(45deg,#feac5e,#c779d0,#4bc0c8);

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5ODk2NQ_size_16_color_FFFFFF_t_70 8]

## 第十种 ##

background: linear-gradient(45deg,rgba(254,172,94,0.5),rgba(199,121,208,0.5),rgba(75,192,200,0.5));

![在这里插入图片描述][2020073120063574.png]  
`rgba` 使用了 `0.5` 的透明度。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5ODk2NQ_size_16_color_FFFFFF_t_70 9]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5ODk2NQ_size_16_color_FFFFFF_t_70]: /images/20230208/2aa03ec594524ea883d5e18ce5c48d3d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5ODk2NQ_size_16_color_FFFFFF_t_70 1]: /images/20230208/b536bf1341654aee9342d99931676a11.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5ODk2NQ_size_16_color_FFFFFF_t_70 2]: /images/20230208/63625520b71d48839a73a54e5b2c25a0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5ODk2NQ_size_16_color_FFFFFF_t_70 3]: /images/20230208/2a315bbea05b442aa72f40ffb86be594.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5ODk2NQ_size_16_color_FFFFFF_t_70 4]: /images/20230208/9797e8eb49324247953b4fb6bfa44e4c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5ODk2NQ_size_16_color_FFFFFF_t_70 5]: /images/20230208/f6af31427ac24d499018f7809a229df6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5ODk2NQ_size_16_color_FFFFFF_t_70 6]: /images/20230208/d64ad47c3fbe49698b1104225e7a7349.png
[20200731200530462.png]: /images/20230208/69b65a2c263344c99b96df76316b5a8c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5ODk2NQ_size_16_color_FFFFFF_t_70 7]: /images/20230208/1a6b8388d912433ca3dd4a7cb661a937.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5ODk2NQ_size_16_color_FFFFFF_t_70 8]: /images/20230208/6abba2e392074a97a2f8469cb23862e7.png
[2020073120063574.png]: /images/20230208/5971290ed7a04fd496260c753a393904.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5ODk2NQ_size_16_color_FFFFFF_t_70 9]: /images/20230208/2adaa852882642de83f0bde8f5dc76f7.png