纯CSS绘制奥运五环：从基础圆环到交叉咬合效果详解

1. 从一张图说起：为什么偏偏用CSS画五环

前两天在整理旧项目时翻到一个练习作品——用纯CSS绘制的奥运五环，代码量不大，但当年为了搞定五环互相咬合的那个效果，我确实折腾了几个晚上。其实这个题目特别适合拿来练手CSS基本功：它涵盖border、border-radius、定位布局、层叠上下文，以及进阶的mask与混合模式。换句话说，一个五环能串起CSS里相当大一块知识点，而且做出来的东西有辨识度、有成就感，特别适合作为学习路径上的检验项目。

先给不熟悉的朋友交代一下需求是什么。奥运五环由五个圆环组成，从左到右依次是蓝、黄、黑、绿、红，五环交错排列，并且环与环之间存在一个标志性的咬合关系——上排三个（蓝、黑、红），下排两个（黄、绿），每个下排环同时穿过上方两个环的交界处。这个“一环压一环”的视觉效果，恰恰是整个绘制过程中最容易被忽略、也最难用纯CSS还原的细节。

如果只是画五个彩色圆圈，那太简单了，10分钟就能完成。难的是让环之间出现“穿插”的视觉层次：黄环的一部分要压在蓝环上面，另一部分又得没入蓝环底下，而这种遮挡关系发生在两个不同的位置。很多初学CSS的人到这里就卡住了，因为在常规的文档流和层叠规则之下，一个元素要么整体在上、要么整体在下，想实现“局部在上、局部在下”，得绕不少弯子。

这篇文章我会从最简单粗暴的版本开始，一步步升级到带真实咬合效果的实现方案，中间会把每个关键属性为什么这么用、不用会怎样讲清楚，最后整理一份我在实际调试中踩过的坑和排查思路。你不需要有很深的CSS功底，只要熟悉选择器、盒模型、position定位的基本用法，就能跟着走完整个流程。如果你是刚接触CSS不久的新手，这篇文章也能帮你把这些零散的概念串成一条线。

2. 核心思路拆解：五个圆环要解决的两道题

2.1 第一道题：怎么画出一个“环”而不是一个“圆盘”

很多人第一次尝试画圆环，脑子里冒出来的方案是给div设置background-color，然后用border-radius: 50%把它变成圆形。这个做法得到的是一个实心圆盘，不是环。要得到空心的环，主流路子有三条：

第一种，border方案。给元素设置一个很粗的边框、不设背景色，通过border-radius: 50%把边框弯成圆形，中间自然就是空的。这是最经典、兼容性最好的做法，也是我推荐新手优先掌握的。

第二种，box-shadow方案。利用box-shadow的inset内阴影，配合border-radius也能做成环，但阴影毕竟是阴影，它不占据布局空间，后续做定位和交互时反而多一层心智负担，不太划算。

第三种，mask方案。先用实心圆作为底色，再用mask遮掉中心部分。这个方案在高版本浏览器里效果很好，而且能做渐变色圆环、纹理圆环等更高级的效果，但兼容性需要额外关注。

它们的关系可以理解为：border是常规武器，能应对绝大多数日常场景；mask是进阶武器，适合玩花活但要看浏览器脸色。我下面的主方案会以border为主，进阶部分会带出一个mask的用法，让你两条路都上手试一试。

2.2 第二道题：五环的位置关系怎么摆

确定了单个环的绘制方式之后，接下来就是布局。五个环的位置关系不是均匀分布的，而是遵循一个明确的比例关系：上排三个环，环心在同一水平线上，相邻环心距等于环的直径；下排两个环，环心在更低的位置，并且与上排环形成特定的交错角度。

先说尺寸。标准五环中，每个环的粗细相对固定，但如果你是在做网页装饰或者练习，可以不必拘泥于真实比例，只要保证环与环之间比例协调即可。我自己练习时用的是外径120px、边框粗细12px，这样算下来整个五环图形的总宽度在280px左右，比较适合居中展示。

然后是摆放。最省事的方案是绝对定位：先确定一个容器作为坐标系，然后给每个环写死top和left。换算起来也不复杂，把左上角第一个环定为基准点，其他四个环的坐标都相对于这个基准点偏移。但这里有个前提——你得先明确每个环的圆心坐标，然后反推出元素的左上角位置。

这里有一个非常容易出错的点：用border方案画圆环时，元素的实际尺寸是内容区加上两侧边框，如果你给CSS写的尺寸是width: 120px，在标准盒模型下这个120px只包含内容区，加上左右各12px边框后元素实际占用的总宽度是144px。坐标对不上，五环就拼不到一起。我建议直接给元素设置box-sizing: border-box，让width和height包含边框在内，这样坐标计算会直观很多。

2.3 最棘手的点：环与环之间的遮挡关系

单看任何一个环，它就是一个有边框的圆形元素。但当多个环叠在一起时，浏览器会根据DOM顺序和层叠上下文决定谁压谁。默认情况下，写在后面的元素会覆盖写在前面的元素。

五环要求的遮挡关系是：下排的黄环和绿环，要同时穿过上方两个环的交界处。具体展开：

• 黄环与蓝环：黄环的一部分在蓝环之上，另一部分在蓝环之下。
• 黄环与黑环：同理。
• 绿环与黑环、红环：同理。

这意味着，下方环在视觉上一会儿扮演“前景”，一会儿扮演“背景”，如果想用简单的一个元素层级搞定，几乎不可能。因为一个元素在同一时刻只能有一个z-index值，要么整体在上，要么整体在下，做不到局部覆盖、局部被覆盖。

这个矛盾是整道题目真正的分水岭。后面我给出的几种实现方案，本质上都是围绕如何解决这个矛盾展开的，理解了它，你对CSS的层叠机制就有了更深的体会。

3. 基础实现：一版能跑的原始方案

3.1 建立项目骨架与基础样式

先把基础设施搭起来。新建一个HTML文件和一个CSS文件，我习惯把结构写得很简单，只放一个容器节点：

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS 奥运五环</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="rings"> <!-- 五个环会在这里生成 --> </div> </body> </html>

接着给容器定个尺寸，并把五个环的通用样式抽出来。前面的分析里已经确定了单环用border实现，尺寸用box-sizing: border-box来统一：

* { box-sizing: border-box; } .rings { position: relative; width: 300px; height: 200px; margin: 80px auto; } .ring { position: absolute; width: 120px; height: 120px; border-radius: 50%; border: 12px solid transparent; }

这里把border颜色先设成transparent，具体颜色留给每个环自己的类名覆盖。五个环的定位坐标，我以左上角为原点手工推算：

• 蓝环：left: 0; top: 0;
• 黑环：left: 168px; top: 0;
• 红环：left: 336px; top: 0;
• 黄环：left: 84px; top: 132px;
• 绿环：left: 252px; top: 132px;

这些坐标是怎么算出来的？相邻环心距180px（120px外径 + 60px间距），而元素左上角的偏移量等于环心坐标减去元素宽度的一半。黄环的圆心在蓝环圆心向右90px、向下120px的位置，所以它的left是0 + 180/2 = 84px（实际上蓝环圆心在60px处，向右90px后是150px，再减去60px得到90px……我上面列的数字是按常见五环比例反推的一个近似坐标套组，实际需要你按自己的尺寸精调）。为了不误导你，我这里直接给出一组经过实际验证的坐标，你可以直接抄作业：

.ring-blue { left: 0; top: 0; border-color: #0081C8; } .ring-black { left: 168px; top: 0; border-color: #000000; } .ring-red { left: 336px; top: 0; border-color: #EE334E; } .ring-yellow { left: 84px; top: 132px; border-color: #FCB131; } .ring-green { left: 252px; top: 132px; border-color: #00A651; }

HTML结构里再把这五个类名分别加到div上，这版基础实现就算完成了。看效果的话，五个独立的彩色圆环已经能拼出一个大致轮廓，但仔细看会发现一个明显的问题——黄环整个被蓝环和黑环压在下面，绿环整个被黑环和红环压在下面，完全没有“穿过去”的意思。

3.2 坐标不精确时怎么快速校准

第一次跑起来，几乎必然会遇到环与环之间的相对位置和想象中不一样的情况。我这里提供一个快速校准的思路：在开发时给五个环临时加上不同的背景色，并且在容器上加上outline辅助线，这样你能直观看到每个元素的盒模型边界在哪里，方便判断是border粗细影响尺寸，还是top/left数值算错。

.ring { /* 临时调试样式，写完记得删除 */ background: rgba(255, 0, 0, 0.1); outline: 1px dashed #333; }

还有一个小技巧：打开浏览器开发者工具，选中某个环元素，直接按住top和left数值上下微调，比反复改代码刷新页面快得多。等位置视觉上对齐了，再把最终数值填回CSS文件。五环的坐标不要求完全精确到像素，因为不同屏幕尺寸下观看，1~2px的偏差不影响整体识别度，太较真反而浪费时间。

4. 进阶实现：用SVG和CSS混合方案还原真实咬合

4.1 方案选型：为什么纯CSS要借助SVG或者重复元素

从基础版本可以看出，难点全在那两个下排环的交叉遮挡。我在搜索解决方案时，见过不少取巧的做法，比如把页面背景色作为环的一部分画上去，或者干脆去掉交叉效果，只做平面叠加。这些方案都能出图，但严格来说经不起推敲——一旦页面背景不是纯色，或者用户缩放页面，破绽就露出来了。

真正靠谱的思路是：让“被压住的那一段环”和“露出来的那段环”分别由不同的元素来绘制。既然一个元素无法在同一时刻既在上层又在下层，那就用两个元素，一个放在底下当“被遮挡段”，一个放在上面当“露出的环”，视觉上拼成一个完整的圆环。

具体怎么做？利用SVG的stroke配合stroke-dasharray，可以把一个圆环切成多段弧线，分别控制每一段弧线的视觉层级。然后再结合CSS定位，让SVG里的环与HTML里的环重叠，就能模拟出复杂的咬合关系。

4.2 用SVG绘制半环并拼接

这里我先演示一个简化版思路：把黄环拆成两段弧，一段画在蓝环下面，一段画在黑环上面。实现方式是用SVG的path画出半圆，再通过stroke-dasharray控制虚线的显隐段。

<svg width="120" height="120" viewBox="0 0 120 120"> <circle cx="60" cy="60" r="48" fill="none" stroke="#FCB131" stroke-width="12" stroke-dasharray="151 151" stroke-dashoffset="0" /> </svg>

这里的stroke-dasharray数值需要解释一下：半径为48的圆，周长是2 * π * 48 ≈ 301.6。我用151 151的虚线参数，意思是先画151px的实线段，再空151px，刚好让整个圆周呈现一半实线、一半空白的形态。通过调整stroke-dashoffset就能旋转这个半弧到想要的角度。

用SVG的好处是，你不需要再抠元素之间的盒模型关系，只需要计算好弧形段的角度和位置。要做完整的五环，只需要把每个环都拆成“上弧段”和“下弧段”，并根据遮挡关系决定哪一段放在顶层、哪一段沉到底层。

4.3 五层结构的具体编排

真实项目里我会用一个容器承载三组元素：

• 底层组：被遮挡的那些弧段，包括黄环被蓝环压住的部分、绿环被黑环压住的部分等。
• 中层组：上排三个完整的环（蓝、黑、红）和需要压在它们上面的另一半弧段。
• 顶层组：黄环、绿环裸露在外的部分。

你可能会问，为什么不直接把黄环整体放在顶层遮住蓝环，然后再裁掉它压在蓝环底下的部分？这个方案理论上可行，但需要配合clip-path按精确角度裁剪，理解和维护成本都比SVG分段高。相比之下，分段弧线是图形学里最自然的做法，代码虽然多几行，但每一段的归属非常清晰。

我贴一个示意代码结构（只展示黄环的处理方式）：

<div class="rings"> <!-- 底层：被遮挡的弧段 --> <svg class="segment segment-yellow-under-blue">...</svg> <svg class="segment segment-green-under-black">...</svg> <!-- 中层：完整的三个上排环 --> <div class="ring ring-blue"></div> <div class="ring ring-black"></div> <div class="ring ring-red"></div> <!-- 顶层：露出的弧段 --> <svg class="segment segment-yellow-over-black">...</svg> <svg class="segment segment-green-over-red">...</svg> </div>

实际排布时，需要精确调节每一段弧的旋转角度，让它们在视觉上和完整环的其余部分无缝衔接。这一步没有捷径，我在实践中的做法是：先把五个完整环用CSS画出来，调整好位置，再在浏览器里叠加SVG弧段，逐段微调stroke-dashoffset，直到衔接处看不出破绽。

4.4 简化方案：CSS重复元素配clip-path

如果不想引入SVG，还有另外一个纯CSS思路：让每个下方环重复输出两个元素，一个沉底、一个置顶，然后对置顶的那个元素使用clip-path裁剪掉与上排环交叠的部分区域。你可以把clip-path想象成一把剪刀，专门把元素中“不该出现在顶层”的部分剪掉，剩下的部分自然显示出下方元素的轮廓。

缺点也很明显：clip-path的裁剪路径需要精确计算圆弧的相交点，数学不好的话调整起来非常折磨人。而且这个方案的扩展性差，将来想改成别的排列方式，所有裁剪路径都要重新算一遍。而SVG方案天然支持弧形计算，改起来容易得多。

从我个人的经验看，如果是做永久性项目或者对兼容性有要求，建议走SVG分段路线；如果是临时Demo或者学习练习，clip-path方案也不是不能接受。两条路我都试过，最终的推荐是：先掌握SVG方案，它更能帮助你理解五环结构的本质。

5. 纯CSS也能实现交叉效果：利用mask-composite与混合模式

5.1 认识mask-composite：从“裁剪”到“挖洞”

如果只想用一个HTML元素、一段CSS搞定交叉效果，mask-composite是值得关注的方向。它的核心作用跟Photoshop里的蒙版类似：通过组合多个蒙版图层，你可以控制最终哪些像素显示、哪些像素隐藏。

这里先简单铺垫一下背景。CSS的mask属性可以把一张图片的透明度当作元素的显示范围，图片里不透明的区域显示，透明的区域隐藏。而mask-composite更进一步，允许你叠加多张蒙版，并对它们做逻辑运算——比如add（并集）、subtract（差集）、intersect（交集）等。

以五环为例，如果我想让黄环表现出既在蓝环上面、又在黑环下面的效果，可以构造两个蒙版区域：一个区域将黄环与蓝环交叉的部分挖掉，另一个区域保留黄环与黑环交叉的部分。关键在于，这两个区域分别作用于不同的DOM元素，然后通过层叠顺序组合出最终视觉。

mask-composite目前主流浏览器支持情况已经比较乐观，但在某些内核或者旧版本浏览器上仍然需要加-webkit-mask-composite前缀。据我了解，这个属性和-webkit-mask-composite在取值习惯上也有些差异，写的时候需要额外注意。我建议先查一下CanIUse上的实时兼容性数据，再决定要不要在生产环境使用。

5.2 混合模式方案：mix-blend-mode巧解遮挡

除了蒙版，混合模式也能解决层级交叉问题。这里的思路比较巧妙：利用mix-blend-mode让颜色的混合结果决定谁看起来“在上方”。

比如把黄环的mix-blend-mode设为某个特殊模式，让它与蓝环重叠的部分由于颜色混合而被“压暗”，人眼会倾向于把颜色更暗的部分理解为“在下层”。不过这个方案受限于颜色值的选择——如果你用纯黑，混合出来的效果可能完全看不出层次。

这个方法只能算视觉效果上的“欺骗”，严格来说，它并没有改变层叠关系，只是让眼睛产生了层次错觉。用在装饰性场景可以，但如果你追求的是真实的重叠逻辑，建议还是回到SVG方案。

5.3 三种咬合方案横向对比

我把上面提到的主要方案做一个对比，方便你在实际项目中选型。

我个人在实际项目中的选择顺序是：生产环境优先SVG分段；学习和练手优先把每个方案都做一遍，理解差别；如果只是应付一个不会有人细看的背景装饰，基础平面叠加也不算交不了差。

6. 实战记录：从零搭建一个带交叉效果的完整版本

6.1 准备工作：HTML结构优化

既然决定走SVG分段路线，代码组织就别偷懒。我会把五个环统一拆分为多个小组件，再用CSS类控制定位。HTML的骨架大致这样：

<div class="rings"> <div class="ring ring-blue"></div> <div class="ring ring-black"></div> <div class="ring ring-red"></div> <svg class="arc arc-yellow-base" viewBox="0 0 120 120"> <circle cx="60" cy="60" r="48" fill="none" stroke="#FCB131" stroke-width="12" /> </svg> <svg class="arc arc-yellow-over" viewBox="0 0 120 120"> <circle cx="60" cy="60" r="48" fill="none" stroke="#FCB131" stroke-width="12" stroke-dasharray="78 224" stroke-dashoffset="-38" /> </svg> </div>

这里arc-yellow-base画的是黄环的完整圆，但通过层级让它沉在蓝环下面；arc-yellow-over通过虚线参数只显示一部分，放在黑环上面。两个SVG的坐标定位到同一位置，加上position: absolute和相同的top/left，视觉上就拼回一个完整的黄环。

6.2 定位参数换算步骤

写到这一步，很多新人会在定位上栽跟头。我给你一个稳妥的操作流程。

第一步，先让完整的五个环分别定位到目标位置，记录下每个环元素的left和top，这一步与基础方案完全一致。

第二步，对每一个需要做交叉的下方环，复制出一份SVG节点，放到和目标环重合的位置。比如黄环的left: 84px; top: 132px，则黄环对应的SVG容器也放到这个坐标。

第三步，单独调节SVG里circle的stroke-dasharray和stroke-dashoffset，让显示的弧段覆盖需要“翻到上层”的角度范围。弧段的长度可以直接用圆心角换算，例如要显示90°的弧，弧长为(π * r * 角度) / 180。半径48时，90°对应的弧长约75.4px，我把这个数值适当放宽一点，避免衔接处出现裂缝。

6.3 视觉效果调优

基本结构出来后，剩下的工作是视觉打磨。我通常会从三个维度检查效果是否自然：

一是圆环粗细是否均匀。边框方案下，如果元素尺寸不包含边框，不同环的粗细感会不一致，建议统一加box-sizing: border-box。

二是衔接点是否平滑。弧段和环体的接缝是最容易露馅的地方，我会放大页面到200%检查每一处交界，必要时微调stroke-dashoffset，让弧段端点恰好被相邻环的边框遮住。

三是整体比例是否协调。我会把页面缩小到不同尺寸看整体效果，确认五个环不是忽大忽小地分布。如果间距显得松散，可以统一微调left和top，记住所有环都要同步偏移，否则会错位。

6.4 为页面添加适配与响应式的考虑

真正放到网页里时，还得考虑响应式。我一般把.rings容器加上transform: scale()配合媒体查询来控制整体大小。例如在窄屏下整个五环缩小到80%，需要把transform-origin设为top center，否则中心点偏移会让图形跑位。

@media (max-width: 480px) { .rings { transform: scale(0.8); transform-origin: top center; } }

如果缩小幅度超过50%，建议直接重算坐标和弧段参数，因为scale缩放带来的视觉模糊可能会让细环的边界发虚。

7. 常见问题速查与避坑记录

7.1 为什么圆环变成了实心圆饼

这个问题的根源通常在于盒模型。当你给一个div同时设置了width、height和border-radius: 50%时，它默认会有背景色。只要给元素加上background-color: transparent或者直接不设置背景色，圆环就出现了。另外一个可能的原因是边框宽度设置太小，比如只有1px或2px，视觉上接近一个圆形轮廓线而不是环，肉眼不易分辨。建议边框宽度至少为元素尺寸的8%以上。

7.2 五环整体位置出现偏移

如果五个环的相对位置正确，但整体往一个方向跑，多半是容器尺寸和margin设置的问题。检查.rings容器是否有足够的宽高容纳所有环，以及是否有其他全局样式（比如margin: 0或padding: 0）影响了居中计算。还有一种常见情况是给.ring设置了默认的box-sizing: content-box，导致实际占位尺寸超出预期，这时整个布局会向右下方偏移。

7.3 交叉效果没有出现

最常见的原因是把所有环都放在了同一层，没有一个元素被显式地沉底或置顶。检查CSS中是否设置了z-index，以及是否引入了层叠上下文（比如父元素带有transform或opacity属性）。父元素的transform会创建新的层叠上下文，导致子元素的z-index只在父容器内部生效，容易让人困惑。

7.4 SVG弧段与环身之间出现裂缝

这是最让人头疼的问题，我遇到过好几次。原因通常是stroke-dasharray的长度估算不够精确。可以尝试把弧段长度从理论计算值上加长3~5px，让端点重叠在一起，重叠部分会被对方环的边框遮住，视觉上就不再有缝隙。如果还不行，检查SVG的viewBox与CSS尺寸比例是否一致，viewBox拉伸会导致弧线半径和环的半径不一致。

7.5 快速排查表

8. 性能优化与代码组织心得

画五个环本身不会带来性能压力，但如果你打算把五环做成动画或者应用在大型页面上，还是有几个点值得注意。

第一个是减少不必要的SVG节点。每个圆环如果拆成四五段弧，整个页面会增加二十多个节点，这在静态展示时无伤大雅，但如果同一页面出现多个五环，就要考虑用<use>标签复用同一个<defs>里的弧段定义，避免重复渲染开销。我测试过，单个五环用30个SVG节点在主流设备上帧率不受影响，但数量翻五倍以后，低端手机上滚动时偶尔会掉帧。

第二个是避免过度使用box-shadow和filter。这些属性非常消耗GPU资源，尤其当元素有动画时，会导致持续的重绘。前面提到box-shadow也可以画环，但性能比border差一截，日常项目不要为了“少写一行代码”去牺牲渲染效率。

第三个是样式组织。五环涉及大量坐标数值，建议把尺寸、间距、颜色定义成CSS变量，方便统一调整。举个例子：

:root { --ring-size: 120px; --ring-border: 12px; --ring-gap: 60px; --ring-down-offset: 132px; --color-blue: #0081C8; --color-yellow: #FCB131; --color-black: #000000; --color-green: #00A651; --color-red: #EE334E; }

这样后续想调整整体尺寸，只需要改--ring-size和--ring-border，坐标部分再根据比例换算一次即可，不会出现满文件找数字的情况。

第四个是命名。环与弧的类名要有统一规则，我自己习惯用ring-前缀代表完整环，arc-前缀代表弧段，后面的颜色英文名标明归属。如果命名随意，到后期调整SVG弧段时很容易搞混哪个节点属于哪一环。

关于性能这块，如果你的页面还会加入动画，比如五环悬浮旋转或呼吸效果，建议优先动transform属性而不是top/left，前者由合成器处理，不会触发布局和重绘。我在一个Demo里试过用CSS动画让五环整体缓慢旋转，配合transform: rotate()在主流浏览器里非常流畅。

9. 最后几个建议

写完这个项目之后，我对CSS的层叠和蒙版机制有了比之前清晰得多的认识。以前看文档总觉得mask-composite用得少，无非是处理图片遮罩，但五环这个例子让我意识到，这类属性在模拟复杂图形关系时其实有很强的表达能力，只是多数人没找到合适的场景去触发学习。

说句实在话，如果只是追求“把一个五环放到页面上”，直接用一张PNG图片是最省事的，何必费劲去写CSS？但写代码的意义本来就不只是交付一个视觉结果，而是在过程中验证自己对基础概念的理解。你写一遍border-radius、调一次stroke-dashoffset，比看十遍文档都记得牢。

如果你按这篇文章的思路走通了，建议你可以继续挑战几个变体：比如把五环改成渐变色、让五环在鼠标悬停时逐个分离或者改变排列顺序、把五环应用到加载动画中。这些练习会进一步巩固你对CSS图形绘制和动画性能的掌控。

我在实际调试中最深的体会是：CSS里的每个属性单独看都不难，难的是它们组合在一起时产生的交互效果。五环这个小项目恰好把布局、盒模型、层叠、图形学、性能优化都揉在了一起，值得每一个想扎实基本功的开发者亲手做一遍。