两种或多种颜色之间的平滑过渡
可指定多个中间颜色值(色标)
使用:任何可以设置背景图片的地方
<strong>语法</strong>:
- background-image : value
<strong>value</strong>:
- 线性渐变 :linear-gradient(angle , color-point1 , color-point2 , ...);
- 径向渐变 :radial-gradient([position], color-point1 , color-point2 , ...);
- 重复线性渐变 :repeating-linear-gradient(angle , color-point1 , color-point2 , ...);
- 重复径向渐变 :repeating-radial-gradient([position], color-point1 , color-point2 , ...);
线性渐变 linear-gradient
<pre>
linear-gradient(angle , color-point1 , color-point2 , ...);
angle : 角度值(如 0 deg)、关键字(如 to top)
color-point : 颜色起始色,中间色、结束色
</pre>
例子:
background-image : linear-gradient(90 deg , red , blue);
含义:从左到右,红色到蓝色的渐变
径向渐变 radial-gradient
<pre>
radial-gradient([position], color-point1 , color-point2 , ...);
position: 指定渐变的圆心位置,默认是元素的中心,可以是数值、百分比、关键字,可省略
color-point : 颜色起始色,中间色、结束色(同linear-gradient一样)
</pre>
例子:
background-image : radial-gradient(300px at left top, red , blue);
含义:以左上角为圆心,渐变半径为300px,红色到蓝色的渐变
重复线性渐变 repeating-linear-gradient
<pre>
repeating-linear-gradient(angle , color-point1 , color-point2 , ...);
angle : 角度值(如 0 deg)、关键字(如 to top)
color-point : 颜色起始色,中间色、结束色
</pre>
例子:
background-image : repeating-linear-gradient(to top , #ffffff , #ccc 50px);
含义:从下到上,长度为50px,白色到灰色色的渐变,重复多次,直到将元素铺满为止
重复径向渐变 repeating-radial-gradient
<pre>
repeating-radial-gradient([position], color-point1 , color-point2 , ...);
position: 指定渐变的圆心位置,默认是元素的中心,可以是数值、百分比、关键字,可省略
color-point : 颜色起始色,中间色、结束色(同repeating-linear-gradient一样)
</pre>
例子:
background-image : repeating-radial-gradient(50px at center, red 0px, blue 20px,green 50px);
含义:以元素的中心为圆心,半径为50px,红色到蓝色再到绿色的渐变,重复多次,直到将元素铺满为止。
角度值和关键字的对应关系:
0 deg <=> to top; 90 deg <=> to right; 180 deg <=> to bottom; 270 deg <=> to left;