DIV+CSS实现射击靶子

每一天，每一步

于 2021-03-25 22:14:12 发布

阅读量620

点赞数 1

分类专栏： HTML/CSS 文章标签： html css

本文链接：https://blog.csdn.net/u010234868/article/details/115220205

版权

HTML/CSS 专栏收录该内容

42 篇文章

订阅专栏

HTML代码：

<div class="circle">
	<div class="circle1">
		<div class="circle2">
			<div class="circle3">
				<div class="circle4">
					<div class="circle5"></div>
				</div>
			</div>
		</div>
	</div>
</div>

CSS代码：

.circle {
	width: 300px;
	height: 300px;
	backgcircle-color: #fff;
	border: 10px solid #f00;
	border-radius: 50%;
}
.circle1,
.circle2,
.circle3,
.circle4,
.circle5 {
	border: 10px solid #f00;
	border-radius: 50%;
	margin: 15px;
}
.circle1 {
	width: 250px;
	height: 250px;
}
.circle2 {
	width: 200px;
	height: 200px;
}
.circle3 {
	width: 150px;
	height: 150px;
}
.circle4 {
	width: 100px;
	height: 100px;
}
.circle5 {
	width: 50px;
	height: 50px;
	background-color: #f00;
}