通过CSS实现左右内凹圆形，彻底搞懂实现步骤

最新推荐文章于 2023-09-01 13:46:06 发布

LiWang__

最新推荐文章于 2023-09-01 13:46:06 发布

阅读量1.8k

点赞数

分类专栏：全栈文章标签： css

本文链接：https://blog.csdn.net/lwang_IT/article/details/102564793

版权

全栈专栏收录该内容

6 篇文章 0 订阅

订阅专栏

实现

效果：

代码：

	<body>
		<div class="container"></div>
	</body>
	
	<style>
		body{
			background:black;
		}
		.container{
			 width: 200px;
			 height: 100px;
			 background-image: radial-gradient(circle,transparent, transparent 8px,#FFFFFF 8px, #FFFFFF);
			 background-position: 100px;
		 }
	</style>

彻底搞懂实现步骤：

1.首先我们在元素内部实绘制一个透明的圆形渐变

效果：

代码：

<body>
		<div class="container"></div>
	</body>
	
	<style>
		body{
			background:black;
		}
		.container{
			 width: 200px;
			 height: 100px;
	         background-image: radial-gradient(circle,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 0%, transparent 8px,#FFFFFF 8px, #FFFFFF 100%);

circle,：代表圆形的径向渐变，默认圆心为元素的中间位置。因为元素的宽为200px,所以圆心的横坐标为100px;因为元素的高为100px,所以圆心的纵坐标为50px;也可以写为：

background-image: radial-gradient(circle at 50% 50%,transparent 0%, transparent 8px,#FFFFFF 8px, #FFFFFF 100%);

或者

background-image: radial-gradient(circle at 100px 50px,transparent 0%, transparent 8px,#FFFFFF 8px, #FFFFFF 100%);

transparent 0%, transparent 8px,#FFFFFF 8px, #FFFFFF 100%：代表从圆心开始，绘制一个半径为8px颜色为transparent（透明）的圆，剩余的部分为#FFFFFF色，由于渐变颜色默认第一个颜色位置是0%，最后一个颜色位置是100%，因此可以写为：

background-image: radial-gradient(circle,transparent, transparent 8px,#FFFFFF 8px, #FFFFFF);

2.让背景重复起来

接下来我们给背景设置一个大小：

	.container{
			 width: 200px;
			 height: 100px;
			 background-image: radial-gradient(circle,transparent, transparent 8px,#FFFFFF 8px, #FFFFFF);
			 background-size: 20%;
		 }

效果：

因为我们设置了background-size的宽度为元素的20%，默认background-repeat 属性的值为repeat(背景图像将向垂直和水平方向重复)，所以背景重复了5次。

这显然不是我们想要的效果，继续改进。

3.修改背景图像的位置

代码：

	.container{
			 background-color: red;
			 width: 200px;
			 height: 100px;
			 background-image: radial-gradient(circle,transparent, transparent 8px,#FFFFFF 8px, #FFFFFF);
			 background-position: 100px;
			 background-repeat:no-repeat;
		 }

效果：

为了更明显我们给元素加个背景色属性:background-color: red

发现设置了background-position: 100px后，背景图像的水平位置向右偏移了100px。此时background-repeat属性的值为no-repeat，代表背景图像不重复，下面我们删掉background-repeat属性:

	.container{
			 width: 200px;
			 height: 100px;
			 background-image: radial-gradient(circle,transparent, transparent 8px,#FFFFFF 8px, #FFFFFF);
			 background-position: 100px;
		 }

效果变为：

CSS background-position 属性

用来设置背景图像（background-image）的起始位置,背景图像如果要重复，将从这一点开始。

第一个值是水平位置，第二个值是垂直。左上角是0。如果仅指定了一个值，第二个值将是50％。

LiWang__

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
通过CSS实现左右内凹圆形，彻底搞懂实现步骤

推荐radial-gradient属性讲解:https://www.zhangxinxu.com/wordpress/2017/11/css3-radial-gradient-syntax-example/方式一：<!DOCTYPE html><html> <head> <meta name="viewport" cont...
复制链接

扫一扫