零基础教你制作圆形

圆形：border-radius: 50%

左上半圆：border-top-left-radius: 50%

右上半圆：border-top-right-radius: 50%

左下半圆：border-bottom-left-radius: 50%

右下半圆：border-bottom-right-radius: 50%

长方形里包含圆形

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.container{
				height: 48px;
				display: flex;
			}
			div[class^=item]{
				flex: 1;
			}
			.num{
				width: 24px;
				height: 24px;
				color: #000;
				background-color: #fff;
				border-radius: 50%;
				text-align: center;
				margin: 12px auto;
			}
			.item1{background-color: aquamarine;}
			.item2{background-color: #FFC0CB;}
			.item3{background-color: cornflowerblue;}
			.item4{background-color: darkorchid;}
			.item5{background-color: #FFFF00;}
			.item6{background-color: darkcyan;}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="item1"><div class="num">1</div></div>
			<div class="item2"><div class="num">2</div></div>
			<div class="item3"><div class="num">3</div></div>
			<div class="item4"><div class="num">4</div></div>
			<div class="item5"><div class="num">5</div></div>
			<div class="item6"><div class="num">6</div></div>
		</div>
	</body>
</html>

image-20260626093610195

不规则圆形

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.circle{
				width: 200px;
				height: 200px;
				background-color: red;
				margin: 0 auto;
			    /*border-radius: 50%;*/
				border-top-right-radius: 50%;
				border-bottom-left-radius: 50%;
				text-align: center;
                line-height: 200px;
                font-size: 48px;
			}
		</style>
	</head>
	<body>
		<div class="circle">
			1
		</div>
	</body>
</html>

image-20260626093715582

posted @ 2026-06-26 09:38  崔雅楠  阅读(6)  评论(0)    收藏  举报