太极图纯css实现需用conic-gradient或双半圆叠加配合border-radius:50%，伪元素小圆须父容器position:relative+inset定位，强制background-clip:padding-box保边缘清晰。
用 border-radius 和渐变画太极大圆，别硬套百分比
纯 CSS 画太极图的核心不是“怎么凑形状”，而是控制好黑白两半的边界位置。大圆用 border-radius: 50% 没问题，但直接给整个元素加线性渐变（比如 to right）会切歪——太极的阴阳分界是垂直中线，且黑白区域各自带弧形过渡，不能靠简单左右渐变模拟。
正确做法是：用两个半圆叠在一起，各占 50% 宽度，再通过 background + radial-gradient 或 conic-gradient 控制内部明暗过渡。更稳的是用单个 div + background: conic-gradient(white 0deg 180deg, black 180deg 360deg)，再配合 border-radius: 50% 裁出圆，但要注意浏览器兼容性（conic-gradient 在 Safari 15.4+ 才稳定支持）。
- 如果要兼容老浏览器，改用两个绝对定位的
div：左半白、右半黑，各自border-radius: 50% 0 0 50%和border-radius: 0 50% 50% 0 - 别设
width/height为奇数像素，否则中心线可能模糊或偏移 0.5px -
box-sizing: border-box必须显式声明，避免 padding/border 挤压圆角
伪元素画小圆时，::before 和 ::after 的尺寸与定位必须联动
太极图里黑白小圆不是装饰，是阴阳互根的关键结构。它们必须严格居于各自半区的几何中心，且直径 = 大圆直径 × 0.25（行业常见比例）。用伪元素实现时，容易犯的错是只调 top/left，却忘了父容器没设 position: relative，导致定位脱标。
- 父容器必须有
position: relative -
::before（白中黑点）设background: black，top: 25%，left: 25%，width: 25%，height: 25%，border-radius: 50% -
::after（黑中白点）同理，但background: white，top: 75%，left: 75% - 所有百分比值都基于父容器宽高，所以父容器必须是正方形（
aspect-ratio: 1或width: 200px; height: 200px）
颜色反差不够？检查是否漏了 background-clip: padding-box
太极图要求黑白分明，但实际渲染中常出现灰边、晕染或边缘发虚。这不是渐变写错了，而是默认 background-clip 是 border-box，当有 border 或 outline 时，背景会扩散到边框区域，破坏清晰分界。
- 强制加
background-clip: padding-box，确保背景只渲染在内容+padding 区域 - 避免用
box-shadow模拟轮廓，它会引入半透明像素，让黑白交界变软 - 深色模式下测试：如果用了
prefers-color-scheme，记得重置太极图的background-color为transparent，否则底色干扰
Safari 下小圆偏移？transform: translate(-50%, -50%) 不可靠
很多教程教用 top: 50%; left: 50%; transform: translate(-50%, -50%) 居中小圆，但在 Safari（尤其旧版）中，transform 对伪元素的渲染精度不稳定，小圆经常偏左上 1–2px。
- 改用
inset: 25% 0 0 25%（配合position: absolute）定位白中黑点，等价于top: 25%; right: 0; bottom: 0; left: 25%，再裁出圆形 - 或者干脆放弃百分比，用
calc()算死值：left: calc(50% - 25px)（假设小圆直径 50px） - 别依赖
margin: auto居中伪元素——它只对块级元素有效，而伪元素默认是 inline
细节全在尺寸联动和渲染上下文里，少一个 position: relative 或多一个 border，太极就散了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
