css入门 - 18 径向渐变 - 《001.HTML5 CSS3》

background: radial-gradient(shape size at position, start-color, …, last-color);

shape	确定圆的类型: - ellipse (默认): 指定椭圆形的径向渐变。 - circle ：指定圆形的径向渐变
size	定义渐变的大小，可能值： - farthest-corner (默认) : 指定径向渐变的半径长度为从圆心到离圆心最远的角 - closest-side ：指定径向渐变的半径长度为从圆心到离圆心最近的边 - closest-corner ：指定径向渐变的半径长度为从圆心到离圆心最近的角 - farthest-side ：指定径向渐变的半径长度为从圆心到离圆心最远的边
position	定义渐变的位置。可能值： - center（默认）：设置中间为径向渐变圆心的纵坐标值。 - top：设置顶部为径向渐变圆心的纵坐标值。 - bottom：设置底部为径向渐变圆心的纵坐标值。
start-color, …, last-color	用于指定渐变的起止颜色。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>demo</title> 
<style>
#grad1 {
    height: 150px;
    width: 200px;
    background: -webkit-radial-gradient(red 5%, green 15%, blue 60%); /* Safari 5.1 - 6.0 */
    background: -o-radial-gradient(red 5%, green 15%, blue 60%); /* Opera 11.6 - 12.0 */
    background: -moz-radial-gradient(red 5%, green 15%, blue 60%); /* Firefox 3.6 - 15 */
    background: radial-gradient(red 5%, green 15%, blue 60%); /* 标准的语法（必须放在最后） */
}
</style>
</head>
<body>
<h3>径向渐变 - 颜色结点不均匀分布</h3>
<div id="grad1"></div>
<p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>
</body>
</html>