css绘制半圆，1/4圆，半椭圆，1/4椭圆

最新推荐文章于 2025-03-20 16:32:46 发布

Jenn168

最新推荐文章于 2025-03-20 16:32:46 发布

阅读量1k

点赞数 1

分类专栏：前端开发文章标签： css

本文链接：https://blog.youkuaiyun.com/Jenn168/article/details/108280213

版权

前端开发专栏收录该内容

13 篇文章

订阅专栏

本文介绍如何利用CSS技术绘制半圆、1/4圆、半椭圆和1/4椭圆，详细阐述了实现这些图形的方法和技巧。

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

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		/*半圆*/
		.box1{
			width:100px;
			height: 50px;
			margin: 20px;
			background-color: red;
			border-radius: 50px 50px 0 0;
		}
		/*1/4圆*/
		.box2{
			width:50px;	
			height: 50px;
			margin: 20px;
			background-color: red;
			border-radius: 50px 0 0 0;
		}
		/*1/2 横轴椭圆*/
		.box3{
			width: 300px;
			height: 100px;
			margin: 20px;
			border-radius: 150px 150px 0 0/100px 100px 0 0;
			background-color: red;
		}
		/*1/2 纵轴椭圆*/
		.box33{
			width: 100px;
			height: 300px;
			margin: 20px;
			border-radius: 0 100px 100px 0/0 150px 150px 0;
			background-color: red;
		}
		/*1/4椭圆*/
		.box4{
			width:150px;
			height: 50px;
			margin: 20px;
			background-color: red;
			border-radius: 150px 0 0 0/50px 0 0 0;
		}
	</style>
</head>
<body>
	<div class='box1'></div> 
	<div class='box2'></div> 
	<div class='box3'></div> 
	<div class='box33'></div> 
	<div class='box4'></div> 
</body>
</html>

效果图

在这里插入图片描述