B.4　CSS3渐变

CSS3提供两种渐变样式──linear-gradient（线性渐变）和radial-gradient（径向渐变）。它们可以作为background和background-image属性的值。

表B.4　CSS3渐变
渐变样式 值 注　　释
linear-gradient([origin,] color [stop], color [stop] [,color [stop]]\) 例如： linear-gradient(bottom left, #fff, #f00 30%, #000) 产生一个从盒的左下角向右上角过渡的渐变；从白色开始，在渐变路径30%处变为红色，最后变为黑色 origin指定盒的角，可以是top、left、bottom、right和center关键字的组合或相对于盒尺寸的百分数值（从左上角开始） 第一个颜色值表示渐变开始的颜色值，最后一个颜色值是渐变结束的颜色值，可以在渐变中指定任意数量的颜色值 stop指定颜色在渐变中的位置，可以是长度或相对于整个渐变长度的百分数在默认情况下，线性渐变从盒的顶端中间部分开始 在默认情况下，浏览器会尝试在整个渐变中均匀地分布颜色 如果仅指定两种颜色，则默认的起始位置为0%和100%
radial-gradient([origin,] [shape-or-size-or-both,] color [stop], color [stop] [,color [stop]]*) 例如： radial-gradient(30% 30%,circle closest-corner, #fff,#000) 产生一个从距盒的左上角30%远处开始，以圆形向周围辐射，直到到达最近的角为止的渐变；以白色开始（在圆圈的中心），以黑色结束（在外边缘） origin指定盒的角，可以是top、left、bottom、right和center关键字的组合或相对于盒尺寸的百分数值（从左上角开始） shape在默认情况下为circle或ellipse，这种形状会按照盒的大小进行填充（因此，当盒为矩形时，则使用椭圆形，当盒为方形时使用圆形） size可以为以下关键字：closest-side、closest-corner、farthest-side、farthest-corner、contain、cover size还可以使用长度值显式地设置径向渐变的尺寸（如果想分别设置水平长度和垂直长度，可以使用两个长度值） 第一个颜色值表示渐变开始的颜色值，可以在渐变中指定任意数量的颜色值 stop指定颜色在渐变中的位置，可以是长度或相对于整个渐变长度的百分数在默认情况下，径向渐变从盒的中心开始 在默认情况下，size关键字会被设为contain 在默认情况下，浏览器会尝试在整个渐变中均匀地分布颜色 如果仅指定两种颜色，则默认的起始位置为0%和100%

* WebKit（Chrome和Safari所用的渲染引擎）的早期版本使用的渐变语法与此并不相同。关于该语法更多信息参见www.webkit.org/blog/1424/css3-gradients/。