【CSS】用CSS画太极图

最新推荐文章于 2024-03-07 17:52:03 发布

SEVLT

最新推荐文章于 2024-03-07 17:52:03 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS 文章标签： CSS 太极

本文链接：https://blog.csdn.net/sunqi568/article/details/104058184

本文展示了如何使用CSS来创建太极图，提供了HTML和CSS代码示例，并附带了在线预览链接。

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

效果预览： https://sevlt.github.io/tai-chi/index.html

HTML：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
        <title>Tai-chi</title>
        <link rel="stylesheet" href="style.css">
	</head>
	<body>
		<div id="yinyang"></div>
</html>

CSS：

body {
	background-color: #adadad;/*设置背景色*/
}

#yinyang {
	width: 200px;
	height: 200px;
	border-radius: 50%;
	background: linear-gradient(/*圆球上半部分为白色，下半部分为黑色*/
		to bottom,
		#ffffff 0%,
		#ffffff 50%,
		#000000 50%,
		#000000 100%
	);
	position: relative;
	margin: 100px auto;
}

#yinyang::before {
	position