css画半圆&&画圆弧

爱酱丶

已于 2024-07-12 14:41:33 修改

阅读量377

点赞数 2

文章标签： css 前端

于 2024-07-12 14:38:32 首次发布

本文链接：https://blog.csdn.net/M1512415/article/details/140378776

版权

在这里插入图片描述

利用border-radius和border完成：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>test</title> 
<style> 
	.semicircle {
		width: 100px;
		height: 50px;
		border-radius: 0 0 50px 50px;
		background: #111111;
	}
	
	.semicircle2 {
		width: 100px;
		height: 50px;
		border-radius: 0 0 50px 50px;
		box-sizing: border-box;
	  	border: 2px solid #111111;
		border-top: none;
	}
</style>
</head>
<body>
	<div class="semicircle">
	</div>
	<br><br>
	<div class="semicircle2">
	</div>
	<br><br>
</body>
</html>