<!DOCTYPE html>
<html>
<head>
<title>径向渐变</title>
<style type="text/css">
div{
200px;
height: 150px;
}
.a{
/*径向渐变的默认形状是椭圆ellipse
和线性渐变一样如果不设置第一个颜色和最后一个颜色,那么0%就会赋给第一个颜色 100%就会赋给最后一个颜色*/
background-image: radial-gradient(circle,red,green 10%,gold);
}
.b{
/*标准语法：半径 形状 at 圆心,颜色1 位置1,...
1.半径：
farthest-side 代表从圆心到最远边
farthest-corner 代表从圆心到最远角
closest-side 代表从圆心到最近边
closest-corner 代表从圆心到最近角
2.形状 ellipse椭圆 circle圆
3.圆心 center center,top left,top right,bottom left,bottom right...
4.圆心还可以是数值和百分比
*/
/*background-image:radial-gradient(farthest-corner circle at top left,red,green,blue); */
background-image:radial-gradient(farthest-corner circle at 100px 150px,red,green,blue);
}
.c{
/*重复径向渐变repeating-radial-gradient*/
background-image: repeating-radial-gradient(yellow,green,gold 30%);
}
</style>
</head>
<body>
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
</body>
</html>