空心圆代码

最新推荐文章于 2024-04-01 00:00:00 发布

abcyh999

最新推荐文章于 2024-04-01 00:00:00 发布

阅读量2.3k

点赞数

文章标签： css html

本文链接：https://blog.youkuaiyun.com/abcyh999/article/details/105035073

版权

本文详细介绍了一种使用HTML和CSS实现空心圆形的方法。通过设置两个div元素，分别作为外圆和内圆，利用固定定位和背景颜色的对比，实现了视觉上的空心效果。外圆采用红色背景并设置为圆形，内圆则使用白色背景，同样设置为圆形，并通过调整位置使其位于外圆内部，从而形成空心圆。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

空心圆代码如下：

<!DOCTYPE html>
<html>
	<head>
		<style>
			#{
				padding: 0;
				margin: 0;
			}
			#one{
				width: 300px;
				height: 300px;
				background:red;
				border-radius: 50%;
				float: left;
				position: fixed;		
				}
				
			#two{
				width: 100px;
				height: 100px;
				background:white;
				border-radius:50px;
				float: left;
				position: fixed;
				left:110px;
				top:110px;
			}
		</style>
	</head>
	<body>
		<div id="one"></div>
		<span id="two"></span>
	</body>
</html>