CSS画太极图：border-radius与渐变实现大圆，伪元素做黑白小圆

本文深入解析了纯CSS绘制太极图的核心技巧与常见陷阱，强调实现关键不在于堆砌形状，而在于精准控制阴阳分界、小圆定位与渲染细节：大圆需用conic-gradient或双半圆叠加配合border-radius:50%，避免线性渐变导致的切歪；黑白小圆必须通过position:relative父容器+inset定位（而非不可靠的transform居中）严格置于各自半区几何中心，并遵循直径为大圆25%的比例规范；同时必须显式声明box-sizing:border-box、background-clip:padding-box以杜绝灰边与模糊，兼顾Safari兼容性与深色模式适配——每一个像素、每一条声明，都在守护阴阳互根的视觉平衡。

用 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，太极就散了。

今天关于《CSS画太极图：border-radius与渐变实现大圆，伪元素做黑白小圆》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！