CSS中的边框显示圆角

最新推荐文章于 2023-03-16 15:57:48 发布

原创最新推荐文章于 2023-03-16 15:57:48 发布 · 238 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#CSS中的边框显示圆角

CSS 专栏收录该内容

68 篇文章

订阅专栏

本文详细介绍了如何使用CSS的border-radius属性绘制太极图，通过精确的边框和圆角设置，实现了太极图的完美呈现。文章包含两段HTML代码示例，展示了不同方法创建太极图案的过程。

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

CSS中的边框显示圆角

属性：border-radius
语法格式：
border-radius:左上右上右下左下；四个值
border-radius:左上右下右上左下（对角线）两个值
border-radius:左上右右下左下；一个值
还可以通过x轴y轴设置：border-radius:20px(X轴)/30px(y轴)；
border-radius:20px(X轴1) 30px(X轴2)/40px(y轴1) 50px(y轴2)

border-radius的值为50或50%时，显示圆形。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>太极图</title>
		<style>
			*{margin:0;padding:0;}
			div{width:300px;border-top:150px solid #f00; border-bottom:150px solid #0ff; border-radius:50%; position:relative;}
			p{height:150px; width:150px;}
			.xiao1{background:#f00; position:absolute; border-radius:50%;left:0;top:-75px;}
			.xiao2{background:#0ff; position:absolute; border-radius:50%;left:150px;  top:-75px;}
		</style>
	</head>
	<body>
		<div>
		  <p class="xiao1"></p>
		  <p class="xiao2"></p>
		
		</div>
	</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{margin: 0; padding: 0;}
			div{width: 0; 
			border-top: 150px solid #f00; 
			border-left: 150px solid #f00;
			border-right: 150px solid #0ff; 
			border-bottom: 150px solid #0ff;
			border-radius: 50%;
			position: relative;
			}
			p{width: 150px; height: 150px; background: #000; border-radius: 50%; position: absolute;}
			/*span{width: 30px; height: 30px; background: #000; position: absolute; margin: auto; top: 0 left:0; right: 0; bottom: 0;}*/
			.xiao1{left: -22px; top: -128px; background: #f00;}
			.xiao2{left: -128px; top: -22px; background: #0ff;}
		</style>
	</head>
	<body>
		<div>
			<p class="xiao1"><!--<span></span>--></p>
			<p class="xiao2"></p>
		</div>
	</body>
</html>

在这里插入图片描述