【无标题】

2021-12-04 14:30:38 作者：互联网

效果：

代码：

<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	确定圆的类型: ellipse (默认): 指定椭圆形的径向渐变。 circle ：指定圆形的径向渐变
size	定义渐变的大小，可能值： farthest-corner (默认) : 指定径向渐变的半径长度为从圆心到离圆心最远的角 closest-side ：指定径向渐变的半径长度为从圆心到离圆心最近的边 closest-corner ：指定径向渐变的半径长度为从圆心到离圆心最近的角 farthest-side ：指定径向渐变的半径长度为从圆心到离圆心最远的边
position	定义渐变的位置。可能值： center（默认）：设置中间为径向渐变圆心的纵坐标值。 top：设置顶部为径向渐变圆心的纵坐标值。 bottom：设置底部为径向渐变圆心的纵坐标值。
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.让背景重复起来

标签：渐变,无标题,圆心,background,8px,FFFFFF,transparent
来源： https://blog.csdn.net/lwang_IT/article/details/121715209