css径向渐变背景

径向渐变顾名思义就是沿着半径的方向渐变颜色，通常是圆形或椭圆形。

示例

<div id="grad1"></div>

径向渐变（圆形）

#grad1 {height: 200px;width: 200px;background-image: radial-gradient(circle, red, blue); }

径向渐变（椭圆形）

#grad1 {height: 150px;width: 200px;background-image: radial-gradient(ellipse, red, blue); }

还是能够区分出来渐变的形状的。

重复的径向渐变repeating-radial-gradient

#grad1 {height: 200px;background-image: repeating-radial-gradient(red, yellow 10%, green 15%);}

通过指定为repeating-radial-gradient渐变方式来指定循环渐变。

四种渐变范围

#grad1 {height: 150px;width: 150px;background-color: red; /* 浏览器不支持的时候显示 */background-image: radial-gradient(closest-side at 80% 30%, red, yellow, black); }

farthest-side：以最远的两个边为基准范围

#grad2 {height: 300px;width: 300px;background-color: red; /* 浏览器不支持的时候显示 */background-image: radial-gradient(farthest-side at 80% 30%, red, yellow, black); }

closest-corner：以最近的角为基准范围

#grad3 {height: 300px;width: 300px;background-color: red; /* 浏览器不支持的时候显示 */background-image: radial-gradient(closest-corner at 80% 20%, red, yellow, black);}

farthest-corner：以最远的角为基准范围

#grad4 {height: 300px;width: 300px;background-color: red; /* 浏览器不支持的时候显示 */background-image: radial-gradient(farthest-corner at 80% 20%, red, yellow, black); }