效果：
代码：
<body>
<div class="container"></div>
</body>
<style>
body{
background:black;
}
.container{
width: 200px;
height: 100px;
background-image: radial-gradient(circle, transparent 8px,#FFFFFF 8px, #FFFFFF);
background-position: 100px center;
}
</style>解析：
1.在元素内部实绘制一个透明的圆形渐变
效果：
代码：
<body>
<div class="container"></div>
</body>
<style>
body{
background:black;
}
.container{
width: 200px;
height: 100px;
background-image: radial-gradient(circle at 100px 50px,transparent 0%, transparent 8px,#FFFFFF 8px, #FFFFFF 100%);
}
</style>解析：
CSS radial-gradient() 函数：
background-image: radial-gradient(shape size at position, start-color, ..., last-color);| 值 | 描述 |
|---|---|
| shape | 确定圆的类型:
|
| size | 定义渐变的大小，可能值：
|
| position | 定义渐变的位置。可能值：
|
| start-color, ..., last-color | 用于指定渐变的起止颜色。 |
background-image: radial-gradient(circle, transparent 8px,#FFFFFF 8px, #FFFFFF);
circle,：代表圆形的径向渐变，并且圆心为元素的中间位置，因为元素的宽为200px,所以圆心的横坐标为100px;因为元素的高为100px,所以圆心的纵坐标为50px;也可以写为：
background-image: radial-gradient(circle at 50%, transparent 8px,#FFFFFF 8px, #FFFFFF);
或者
transparent 0%, transparent 8px,#FFFFFF 8px, #FFFFFF 100%：代表从圆心开始，绘制一个半径为8px颜色为transparent（透明）的圆，剩余的部分为#FFFFFF色，由于渐变颜色默认第一个颜色位置是0%，最后一个颜色位置是100%，因此可以写为：
background-image: radial-gradient(circle at 100px 50px,transparent, transparent 8px,#FFFFFF 8px, #FFFFFF);
2.让背景重复起来