css函数之重复的径向渐变-CFANZ编程社区

repeating-radial-gradient()函数

语法：

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

shape : 定义渐变的形状分为

ellipse	指定椭圆形的径向渐变
circle	指定圆形的径向渐变

size ：指边缘轮廓的位置，其值可分为

closest-corner	指定径向渐变的半径长度为从圆心到距离圆心最近角
farthest-corner	(默认)指定径向渐变的半径长度为从圆心到距离圆心最远的角
closest-sest	指定径向渐变的半径长度为从圆心到距离圆心最近的边
farthest-side	指定径向渐变的半径长度为从圆心到距离圆心最远的边

position ：指圆心位置，默认为 center

start-color,...last-color : 指定渐变的起止颜色，可以使用长度或者百分比定起止色的位置，不允许负值

eg:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
    .box1{
        width:600px; 
        height:550px; 
        background-image:repeating-radial-gradient(circle at 50% 50%,#333,#000 1%);
        margin:50px auto; 
        padding:40px;  
        border-radius:50%;
        padding-top:50px;
        border:10px solid #ccc;
    }
    </style>
</head>
<body>
<div  class="box1"></div>
</body>
</html>