CSS3 渐变(gradient)可以让你在两个或多个指定的颜色之间显示平稳的过渡。 以前,你必须使用图像来实现这些效果,现在通过使用 CSS3 的渐变(gradients)即可实现。此外,渐变效果的元素在放大时看起来效果更好,因为渐变(gradient)是由浏览器生成的。
简单来说:
从一个颜色到另一个颜色平稳得过渡(颜色逐渐得变化)
线性渐变
语法:
background: linear-gradient(direction, color-stop1, color-stop2, ...);
说明:
direction:默认为to bottom,即从上向下的渐变;
to left,to right, to bottom,to top
to right top, to left bottom,to right botom
方向可以使用角度的变化: deg 代表度数
例如:
标准模式: background:linear-gradient(30deg,red,blue)
兼容模式: background:-webkit-linear-gradient(60deg,reb,blue)
注:如果 linear-gradient() 添加浏览器前缀,方向是不加to的! 指的是从哪个方向开始
渐变色。颜色的分布可以用百分比控制:
举例:
background:linear-gradient(to left,red 10%,blue 30%);
说明:到10%的位置都为红色,出来10%的位置开始向蓝色渐变,直到渐变到30%的位置为蓝色
径向渐变
径向渐变不同于线性渐变,线性渐变是从“一个方向”向“另一个方向”的颜色渐变,而径向渐变是从“一个点”向四周的颜色渐变
语法:
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:最远角。
重复性线性渐变
background:-webkit-repeating-linear-gradient(red 10%,yellow 20%)
重复性径向渐变
background:-webkit-repeating-radial-gradient(red 10%,yellow 20%)