好程序员web前端教程之CSS3渐变

深碍√TFBOYSˉ_ 2022-01-15 07:37 265阅读 0赞

[为什么80%的码农都做不了架构师？>>> ][80_] ![hot3.png][]

**好程序员**web前端教程之CSS3渐变，CSS3渐变（gradient）可以让你在两个或多个指定的颜色之间显示平稳的过渡。 以前，你必须使用图像来实现这些效果，现在通过使用 CSS3 的渐变（gradients）即可实现。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。

### **1、线性渐变** ###

**语法：**background: linear-gradient(direction, color-stop1, color-stop2, ...);**说明：**direction：默认为to bottom，即从上向下的渐变；  
stop：颜色的分布位置，默认均匀分布，例如有3个颜色，各个颜色的stop均为33.33%。

**示例1：to left、top right、to bottom、to top**

div \{ background:linear-gradient(to left, red , blue) \}  
div \{ background:linear-gradient(to right, red , blue) \}  
div \{ background:linear-gradient(to bottom, red , blue) \} /\* 浏览器默认值 \*/  
div \{ background:linear-gradient(to top, red , blue) \}  
分别产生“从右到左”、“从左到右”、“从上到下”、“从下到上”的“红色–绿色”渐变  
![20190508152806995.png][]

**示例2：to right bottom、to right top、to left bottom、to left top**

div \{ background: linear-gradient(to right bottom, red , blue); \}  
div \{ background: linear-gradient(to right top, red , blue); \}  
div \{ background: linear-gradient(to left bottom, red , blue); \}  
div \{ background: linear-gradient(to left top, red , blue); \}  
  
分别产生到“右下角”、“右上角”、“左下角”、“左上角”的渐变  
![20190508152818922.png][]

**示例3：使用角度渐变**

div \{ background: linear-gradient(10deg, red, blue) \}

### **2、径变![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTcwMTY2_size_16_color_FFFFFF_t_70][]** ###

径向渐变不同于线性渐变，线性渐变是从“一个方向”向“另一个方向”的颜色渐变，而径向渐变是从“一个点”向四周的颜色渐变  
  
**语法：**background: radial-gradient(center, shape, size, start-color, ..., last-color);**说明：**center：渐变起点的位置，可以为百分比，默认是图形的正中心。  
shape：渐变的形状，ellipse表示椭圆形，circle表示圆形。默认为ellipse，如果元素形状为正方形的元素，则ellipse和circle显示一样。  
size：渐变的大小，即渐变到哪里停止，它有四个值。 closest-side：最近边；  
farthest-side：最远边； closest-corner：最近角； farthest-corner：最远角

**示例1：多颜色点均匀分布**

div \{ background: radial-gradient(red, green, blue); \}  
以中心（50% 50%）为起点，到最远角（farthest-corner），从red到green、blue的均匀渐变

![20190508152914924.png][]  
**EG:**div \{ background: -webkit-radial-gradient(50% 50%, farthest-corner, red, green, blue); \} 或 div \{ background: -webkit-radial-gradient(center, farthest-corner, red, green, blue); \}

**示例2：多颜色节点不均匀分布**

div \{ background: radial-gradient(red 5%, green 15%, blue 60%); \}  
![20190508152926202.png][]

**示例3：设置渐变形状**

div \{ background: radial-gradient(circle, red, yellow, green); \}  
div \{ background: radial-gradient(ellipse, red, yellow, green); \}  
![20190508152937104.png][]  
circle：渐变为最大的圆形； ellipse：根据元素形状渐变，元素为正方形是显示效果与circle无异。

**示例4：不同尺寸的渐变**

size指定了渐变的大小，即渐变到哪里停止，它有四个值。  
closest-side：最近边； farthest-side：最远边； closest-corner：最近角； farthest-corner：最远角

div \{ background: radial-gradient(60% 40%, closest-side, blue, green, yellow, black); \}  
div \{ background: radial-gradient(60% 40%, farthest-side, blue, green, yellow, black); \}  
div \{ background: radial-gradient(60% 40%, closest-corner, blue, green, yellow, black); \}  
div \{ background: radial-gradient(60% 40%, farthest-corner, blue, green, yellow, black); \}

### **![20190508152952248.png][]** ###

### **3、重复渐变** ###

**（1）重复性线性渐变**

div \{ background: repeating-linear-gradient(red, yellow 10%, green 20%); \}  
**说明：**10%的位置为yellow，20%的位置为green，然后按照这20%向下重复  
![20190508153006614.png][]

**（2）重复性径向渐变**

div \{ background: repeating-radial-gradient(red, yellow 10%, green 20%); \}  
![20190508153020747.png][]

转载于:https://my.oschina.net/530504/blog/3047030

[80_]: https://my.oschina.net/u/2663968/blog/3051541
[hot3.png]: /images/20220115/afb62ee3228b47e6b3b7ce9fef07d193.png
[20190508152806995.png]: /images/20220115/eb4f8d550bb9440390502b5ce7ae7ca3.png
[20190508152818922.png]: /images/20220115/a50a14bf7b0a45ff881cb99cb826e14e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTcwMTY2_size_16_color_FFFFFF_t_70]: /images/20220115/3fd733f1899443e38c2dcd7196a3b9f9.png
[20190508152914924.png]: /images/20220115/b1fddd011e3e4b42aada5c84b49e2361.png
[20190508152926202.png]: /images/20220115/95833939eaeb4bf3b0f6a59a0897321e.png
[20190508152937104.png]: /images/20220115/0c2c49884f264476aead68fadfafb5d8.png
[20190508152952248.png]: /images/20220115/b99987c777a146f1867dad2cc64d5c1c.png
[20190508153006614.png]: /images/20220115/69336d1abfc94b778c8bcd594f556ac9.png
[20190508153020747.png]: /images/20220115/1dcd700947eb4fd4a9df2445a370b062.png