border的应用同心圆

最新推荐文章于 2024-10-18 17:51:23 发布

五赶

最新推荐文章于 2024-10-18 17:51:23 发布

阅读量99

点赞数

文章标签： javascript html 前端

本文链接：https://blog.csdn.net/m0_61707987/article/details/127074412

版权

<style>
		#one {
			width: 400px;
			height: 400px;
			border: 3px solid #000000;
			border-radius: 50%;
			float: left;
			margin: 0 auto;
			overflow: hidden;
		}

		.two {
			width: 350px;
			height: 350px;
			border: 3px solid #008000;
			border-radius: 50%;
			margin: 25px 0 0 25px;
		}

		.three {
			width: 300px;
			height: 300px;
			border: 3px solid #FF0000;
			border-radius: 50%;
			margin: 25px 0 0 25px;
		}

		.four {
			width: 250px;
			height: 250px;
			border: 3px solid #87CEEB;
			border-radius: 50%;
			margin: 25px 0 0 25px;
		}

		.five {
			width: 200px;
			height: 200px;
			border: 3px solid plum;
			border-radius: 50%;
			margin: 25px 0 0 25px;
		}

</style>

css样式

<div id="one">
			<div class="two">
				<div class="three">
					<div class="four">
						<div class="five">
						</div>
					</div>
				</div>
			</div>
		</div>

正文