企业官网建设流程全解析

上周帮人看一个后台的卡片列表，卡片本身写了border-radius: 12px，结果第一行缩略图的背景色是方的，四个角硬生生把圆角顶成了直角，看起来就像"圆角被背景色盖住了"。这类问题我在项目里遇到过不下十次，每次的表象几乎一模一样：圆角明明写了，就是不生效，背景色像是从圆角里"漏"了出来。但真正的原因至少有五六种，有的是子元素溢出，有的是background-clip的默认值在作祟，有的是表格的边框模型根本不支持圆角，还有的是层叠上下文导致的假性覆盖。CSS 设置 border 圆角被背景颜色覆盖，本质上不是一个属性写错的问题，而是一套绘制顺序和裁剪规则没搞清楚的问题。这篇就把我这些年踩过的坑、定位思路和最终落地的几种解法摊开讲，从前端刚入门的新手到写过几年样式但一直被圆角折磨的同学，都能直接拿去用。代码片段都是最小可复现的，你可以复制到本地直接跑。

1. 先把问题定义清楚：圆角究竟被谁盖住了

很多人一上来就去改border-radius，改成50%、改成999px，反复试，结果毫无变化。问题在于，"圆角失效"这四个字下面藏着好几种完全不同的现象，如果不在动手前分清是哪一种，改再多属性也是瞎猜。我一般习惯先做一次视觉判定：把元素的background-color临时换成半透明的红色，给子元素换成半透明的蓝色，一眼就能看出到底是哪一层越过了圆角曲线。

1.1 三种表现相似但成因完全不同的失效

第一种是子元素背景溢出。父盒子有圆角，但子元素（图片、色块、表头）的背景是矩形的，且子元素填满了父盒子的整个内容区，于是父盒子的四个角被矩形色块覆盖，肉眼看就是"父元素的圆角没了"。这是最常见的一种，尤其在卡片列表、列表项、导航条这类"外层有圆角、内层有背景"的结构里高发。

第二种是背景延伸到边框区域。元素自己同时有background-color和border，background-clip默认是border-box，意思是背景会一直铺到边框外边缘的内侧。圆角曲线上，背景和边框的交界处会因为抗锯齿出现一条浅色细缝，看起来像圆角"发虚"或者"被填满了"。这种不是被覆盖，而是背景画得比你以为的更靠外。

第三种是属性根本没生效。比如给<table>设border-radius、给没加appearance: none的原生按钮设圆角、给border-collapse: collapse的表格设圆角。这些情况下你不是被覆盖，而是浏览器压根不理你，因为元素的渲染模型不支持这个属性。

这三种情况的排查路径完全不同。第一种要处理父子关系和裁剪，第二种要处理background-clip，第三种要换实现思路。所以在 Chrome DevTools 里选中元素，先关掉子元素的背景色看圆角是否恢复，这个动作能瞬间把范围缩到三分之一。

1.2 为什么理论上背景不该突破自己的圆角

这里需要说清一个容易被忽略的事实：元素自身的背景色和背景图，一定是被自己的border-radius裁剪的。这是CSS Backgrounds and Borders规范里明确规定的绘制顺序——先按border-radius定义的外轮廓裁剪出绘制区域，再往里填背景，然后画边框，最后画内容。也就是说，一个孤立的<div>只要写了border-radius，它的背景色绝对不可能画到圆角外面去，规范上不存在这种可能。

那为什么你还是看到矩形的背景？因为你在圆角位置看到的那个颜色，很可能不是父元素的背景，而是子元素的背景。父元素的圆角区域是透明的，透出来的是子元素那个矩形的蓝色块。人的眼睛不会区分这是哪一层画的，只会觉得"圆角没生效"。

理解这一点之后，很多困惑就散了。你要修的从来不是父元素的border-radius，而是"让子元素别画到父元素的圆角外面去"。这个认知转变是解决整类问题的起点，也是我在带新人时反复强调的第一句话：先确认你看到的那块颜色是哪一层画的。

1.3 一个 30 秒搞定的定位手法

我的习惯动作是三步。第一步，给父元素加上outline: 2px solid red; outline-offset: -2px;，outline不参与布局也不遵循圆角，但能让你看清父盒子的真实边界。第二步，在 DevTools 里把父元素的border-radius临时改成50%，如果形状从矩形变成了圆或椭圆，说明圆角本身是生效的，是子元素在捣乱；如果毫无变化，说明这个属性被忽略了，直接跳到表格、原生控件那类特殊元素去查。第三步，用 DevTools 的图层高亮或者直接把子元素display: none，逐层关掉，看圆角在哪一层消失时恢复。

这套动作不需要装任何插件，浏览器自带工具就够。我见过太多人在这类问题上耗掉半天，其实前面三分钟把"哪一层画的"定位清楚，后面就是查文档抄代码的事了。

2. 根因拆解：背景与圆角在渲染时怎么打架

定位清楚现象之后，还需要知道浏览器到底按什么顺序画东西。这一层理解决定了你能不能举一反三，而不是每次都去搜"CSS 圆角不生效"。我在项目里review样式时，经常发现有人为了解决一个圆角问题，堆了四五个position: relative和z-index，最后页面能看但没人说得清为什么能看，这种代码下一个人接手就是灾难。

2.1 单个元素内部：背景、边框、内容的绘制顺序

一个元素的绘制可以粗分成这么几层：最底下是背景色和背景图（绘制区域由background-clip决定，默认border-box），然后是边框（画在背景之上），再然后是内容（文字、子元素），如果设置了box-shadow，外阴影画在背景之下，内阴影画在内容和背景之上。border-radius影响的是这个元素"盒子形状"的定义，背景和边框都会被这个形状裁剪。

这里有个关键区别：background-clip控制的是"背景铺到哪儿"，border-radius控制的是"盒子长什么样"。两者配合时，如果background-clip: border-box（默认），背景会填满包括边框在内的整个圆角形状；如果设成padding-box，背景就止步于内边距边缘，边框区域变成透明或者半透明。这就是为什么有些设计稿里，元素边框是半透明的，背景色却看起来"缩"在里面一圈——那是故意设了padding-box。

放一个最直观的对比：

.card-a { border: 6px solid rgba(0, 0, 0, 0.1); background-color: #4a90d9; border-radius: 16px; background-clip: border-box; /* 默认，背景铺到边框外缘内侧 */ } .card-b { border: 6px solid rgba(0, 0, 0, 0.1); background-color: #4a90d9; border-radius: 16px; background-clip: padding-box; /* 背景止于内边距边缘 */ }

.card-b的视觉是"蓝色块四周有一圈半透明的灰色环"，而.card-a是"蓝色块和灰色边框糊在一起"。如果你想要的是前者但忘了写background-clip，圆角附近就会显得脏、发虚，很多人会误判为"背景溢出圆角"。

2.2 父有圆角、子有背景：最常见的那种"覆盖"

现在说回最常见的场景。父元素写了圆角，子元素是个填满整个宽度的色块或者图片。父元素的圆角只影响它自己画的背景和边框，不会自动裁剪子元素。子元素是独立渲染的，它有自己的矩形盒子，除非显式告诉浏览器"请把我超出父级的部分裁掉"，否则它会把父元素的四角覆盖得严严实实。

这就是overflow: hidden的用武之地。给父元素加overflow: hidden之后，浏览器会创建一个裁剪区域，裁剪区域的形状是父元素的 padding box（注意是 padding edge，不是 border edge，但在border-radius存在时，这个裁剪区域会带上圆角形状）。超出这个圆角区域的后代内容就会被裁掉，圆角就"回来了"。

但这里有个大坑：overflow: hidden的裁剪区域是当前元素的 padding box，如果父元素有border，裁剪发生在边框内侧，而不是圆角最外缘。所以如果你的边框是实心的深色、且宽度不小，子元素被裁掉之后，圆角外圈仍然有一圈边框，视觉上没问题；但如果边框是透明的或者没有边框，裁剪位置和圆角曲线是吻合的，也没问题。真正有问题的是你给父元素设了border又想用外阴影的时候——overflow: hidden会把box-shadow一起裁掉，因为外阴影画在元素盒子外面。

2.3 层叠上下文里的"假性覆盖"

还有一种情况比较绕：子元素的圆角被自己的伪元素盖住了。比如卡片里有个::before用来做渐变遮罩，用了position: absolute; inset: 0;定位，它默认会撑满卡片的 padding box，是矩形。卡片有圆角但这个伪元素没有，于是圆角又被顶掉。这种情况你在 DevTools 里看不到任何多余元素，只有展开::before才能发现。

同理，position: absolute的子元素如果它的包含块在裁剪祖先之外，overflow: hidden也裁不住它。典型的例子是下拉菜单：导航条加了overflow: hidden修圆角，结果下拉菜单被裁掉了一半。原因是下拉菜单是position: absolute，它的包含块是最近的定位祖先，如果那个定位祖先在overflow: hidden元素外面，裁剪就不生效于它。

position: fixed更极端，它的包含块是视口（除非祖先有transform、filter、perspective等属性），完全不受overflow影响。所以凡是涉及浮层的组件，都不要指望用overflow: hidden同时兼顾圆角和裁剪浮层，这是两个互相冲突的需求。

3. 对症下药：五种高频场景的落地方案

前面把机制说清了，这一节直接给方案。我把实际项目里最常遇到的五种情况分别写，每种都给出可直接复制的代码和取舍说明。你可以对着自己的场景挑一个用，不用全上。

3.1 子元素背景溢出：overflow 与 clip-path 二选一

最直接的方案就是给父元素加overflow: hidden。这是最老、兼容性最好的做法，一行解决。

.card { border-radius: 12px; overflow: hidden; /* 让子元素被圆角裁剪 */ background-color: #fff; } .card > img { display: block; width: 100%; height: 180px; object-fit: cover; }

img加了display: block是为了去掉行内元素底部那条几像素的基线空隙，这条空隙会让图片和父元素底边之间出现一条白线，圆角位置看起来"没贴边"。这个细节几乎每个项目都会踩一次。

但overflow: hidden有三个很实在的副作用，你必须提前知道：

• 裁掉外阴影。卡片常用的box-shadow: 0 4px 16px rgba(0,0,0,.12)会被裁掉，阴影没了。解决办法是把阴影放到外层容器上，内层负责圆角和裁剪，也就是"阴影层 + 裁剪层"两个 div。
• 裁掉浮层。子孙里的下拉菜单、tooltip、absolute 定位的角标会被切掉一部分。
• 影响 sticky 定位。overflow: hidden会让元素成为滚动容器的候选，position: sticky的子元素可能因此失效。

如果你不能接受这些副作用，用clip-path替代：

.card { border-radius: 12px; clip-path: inset(0 round 12px); }

inset(0 round 12px)的意思是"从盒子四周各向内裁 0，圆角半径 12px"。它只做裁剪，不创建滚动容器，不影响sticky，而且和box-shadow的关系是——clip-path会把外阴影也一起裁掉，所以阴影还是得放外层。它的优势在于不影响布局语义，也不会让浮层被"意外"裁掉（浮层如果在被裁剪的子树里，一样会被裁，这是必然的）。

关于这两个方案的选择，我的经验是：组件内部有浮层的，一律用clip-path；纯展示型卡片，用overflow: hidden更省事。另外clip-path在老版本浏览器上支持度稍差，如果项目还要兼容很老的设备，需要保留overflow: hidden作为兜底。

3.2 背景延伸到边框区域：background-clip 的取舍

如果你看到的现象不是"子元素盖住圆角"，而是圆角附近颜色发糊、边框和背景糊成一片，那问题在background-clip。默认的border-box会让背景铺到边框区域，如果边框是半透明的，背景色会从边框下面透出来，圆角曲线上的抗锯齿一叠加，就显得脏。

.btn { border: 2px solid rgba(255, 255, 255, 0.35); background-color: #1f6feb; background-clip: padding-box; /* 关键：背景止于内边距边缘 */ border-radius: 10px; }

加上padding-box之后，边框区域变成"纯边框"，背景不会透过来，圆角处的过渡会干净很多。

但这里要提醒一句：background-clip: padding-box之后，如果元素有padding，背景只铺到 padding 的外缘，padding 区域是被背景覆盖的——不对，说精确点，padding-box指的是 padding 的外边缘所围成的盒子，也就是不含 border 的那块区域。所以有 padding 的元素，背景依然覆盖 padding 区域，只是不含 border 区域。这个概念很多人搞混，我建议你在 DevTools 里打开盒模型示意，改一次border-box和padding-box，亲眼看一下差别，比记定义管用。

还有个容易翻车的写法：background-clip: text。做渐变文字的时候会用到它，它会让背景只在文字的笔画里显示，此时border-radius对背景完全不起作用，因为背景已经被裁到文字形状里去了。如果这个元素还想要圆角背景，必须拆成两个元素，外层负责圆角背景，内层负责渐变文字。

3.3 表格、原生按钮、输入框：这些元素不吃常规圆角

给<table>设border-radius是最经典的"写了等于没写"。原因是border-collapse: collapse模式下，表格的边框被合并成一套共享边框，渲染模型里根本不存在"表格整体的圆角"这个概念。你写了border-radius，浏览器会默默忽略。

解决办法有两条路。第一条是把border-collapse改掉：

.table { border-collapse: separate; border-spacing: 0; border-radius: 12px; overflow: hidden; /* 表格上 overflow 表现不稳定，建议配合下面这条 */ border: 1px solid #e5e7eb; }

但表格上的overflow: hidden在不同浏览器里表现不完全一致，更稳妥的做法是给四个角的单元格单独加圆角，或者干脆在外层包一个 div：

.table-wrap { border-radius: 12px; overflow: hidden; border: 1px solid #e5e7eb; } .table-wrap > table { border-collapse: collapse; width: 100%; }

外层包裹是我在项目里用得最多的，因为表格本身的结构和边框模型太特殊，绕开它比跟它较劲省心得多。

原生控件同理。<button>和<input>在部分浏览器里有默认的外观样式，会盖住你写的圆角和背景。必须先把默认外观关掉：

button, input[type="text"] { appearance: none; -webkit-appearance: none; /* 老版 WebKit 内核需要前缀 */ border: 1px solid #d0d7de; border-radius: 8px; background-color: #fff; padding: 8px 16px; }

appearance: none这一行是必须的，尤其是 iOS 上的输入框，不加的话圆角和背景都可能被系统样式覆盖，而且圆角处常常出现一条奇怪的阴影。

3.4 渐变和背景图的圆角裁剪

linear-gradient作为背景时，它属于背景层，会被border-radius正常裁剪，这点不用担心。真正需要注意的是background-origin和background-size的组合——如果你写了background-size: 100% 100%想让渐变铺满，又设了padding-box，渐变会被限制在内边距区域，四周露出一圈底色，看起来像圆角"少了一块"。

.hero { border-radius: 16px; background-image: linear-gradient(135deg, #6a5acd, #1f6feb); background-origin: border-box; background-clip: border-box; background-size: cover; padding: 32px; }

用图片做背景时，background-size: cover保证铺满但会裁边，contain保证完整但会留白，这个取舍看设计稿。如果背景图本身有透明通道，border-radius裁剪的是背景盒，图片的透明部分不会被裁成圆角形状，这时候圆角看起来"不完整"——因为图片边缘本身就不是矩形。这种需求得用mask-image或者干脆把图片作为<img>元素放进去。

3.5 伪元素越界与绝对定位元素的裁剪逃逸

伪元素是隐形杀手。.card::before用了position: absolute; inset: 0;，它撑满的是父元素的 padding box，矩形，会把圆角顶掉。最简单的修法是给伪元素自己也加同样的圆角：

.card { position: relative; border-radius: 12px; overflow: hidden; } .card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.6) 100%); border-radius: inherit; /* 继承父级圆角，最关键的一行 */ pointer-events: none; }

border-radius: inherit这个写法值得记住，凡是在圆角容器内部做遮罩、做高光、做角标的伪元素，都可以直接继承，不用重复填数值。改动圆角时只需要改一处，避免了两处数值不同步的经典 bug。

至于绝对定位元素"逃出"裁剪的问题，判断标准很明确：看它的包含块在不在裁剪祖先内部。包含块由最近的position非static的祖先决定（fixed除外，fixed看视口或者最近的transform祖先）。如果包含块在overflow: hidden元素内部，就会被裁；如果在外部，就不会被裁。所以给浮层找一个"干净"的父级做定位参照，比加一堆z-index有效得多。

4. 实操：从零复现并修好一个"卡片圆角被吃掉"的案例

光看原理容易飘，这一节我把完整过程走一遍，从复现到定位到最终代码，你可以照着在本地跑一次，跑完这一类问题基本就通了。

4.1 搭一个能复现问题的最小结构

先写一个最朴素的卡片，父级有圆角和背景，子级是一张图和一块标题区，故意不给任何裁剪：

<div class="card"> <div class="card__cover"></div> <div class="card__body"> <h3 class="card__title">卡片标题</h3> <p class="card__desc">一段描述文字，用来撑开内容高度。</p> </div> </div>

.card { width: 320px; border-radius: 12px; background-color: #ffffff; border: 1px solid #e5e7eb; box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08); } .card__cover { height: 160px; background-color: #4a90d9; } .card__body { padding: 16px; } .card__title { margin: 0 0 8px; font-size: 16px; line-height: 24px; }

打开页面，你会看到白卡片的左右两侧和底部圆角完好，但顶部两个角是直角——因为.card__cover这块蓝色的矩形从卡片最顶端开始铺，把圆角区域盖住了。同时因为overflow默认是visible，蓝色块还不会溢出，只是恰好覆盖了圆角位置。

这就是问题的复现。你注意看，.card自己的圆角是完全正常的，只是被蓝色块遮住了。这就是我前面说的"你看到的颜色不是父元素的背景"。

4.2 三步定位，把范围缩到最小

第一步，在 DevTools 里把.card__cover的background-color临时改成transparent。如果圆角立刻恢复，说明就是子元素遮挡，不用再查别的。我一般会在 Console 里直接敲：

document.querySelector('.card__cover').style.background = 'transparent';

这样不用改源码文件，验证完刷新就恢复了，非常快。

第二步，验证裁剪方案是否会影响别的元素。把overflow: hidden临时加到.card上，看圆角是否恢复，同时观察box-shadow是否消失。如果阴影没了，说明需要用"外层负责阴影、内层负责裁剪"的两层结构。

第三步，检查子孙元素里有没有需要逃出裁剪的浮层。在 Console 里跑一句：

document.querySelectorAll('.card [style*="absolute"], .card [style*="fixed"]').length;

更靠谱的做法是直接看 HTML 结构里有没有 dropdown、tooltip 这类组件。有的话就不能用overflow: hidden，必须换clip-path。

4.3 最终落地的两层结构代码

考虑到卡片通常带阴影，我给出的最终方案是两层 div，这也是我在项目里最常用的模板：

<div class="card-shadow"> <div class="card"> <div class="card__cover"></div> <div class="card__body"> <h3 class="card__title">卡片标题</h3> <p class="card__desc">一段描述文字，用来撑开内容高度。</p> </div> </div> </div>

.card-shadow { border-radius: 12px; box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08); /* 阴影层不裁剪，负责投影 */ } .card { border-radius: 12px; overflow: hidden; /* 裁剪层，负责把子元素收进圆角 */ background-color: #ffffff; border: 1px solid #e5e7eb; }

外层.card-shadow只负责投影和圆角，不加overflow；内层.card负责裁剪和边框。这样阴影不会被吃掉，圆角也不会被子元素顶掉。多一个 div 的代价换来的是逻辑清晰，我觉得很值。

如果这个卡片将来要挂下拉菜单，直接换掉.card的裁剪方式：

.card { border-radius: 12px; clip-path: inset(0 round 12px); /* 替代 overflow: hidden */ background-color: #ffffff; border: 1px solid #e5e7eb; }

注意此时.card上的border会被clip-path一起裁掉一部分，因为inset(0 round 12px)裁的是 border box 的外缘，1px 的边框在圆角处会被裁掉一两个像素的抗锯齿。视觉上影响很小，但如果你的边框很粗（比如 4px 以上），会明显看到圆角处边框变细。这种时候把边框挪到伪元素上，或者用outline代替，会更稳。

4.4 圆角半径到底写多少：几个必须算清楚的规则

顺便说几个数值相关的规则，因为它们经常导致"我写了圆角但形状不对"的误判。

规则一：相邻两个角的半径之和超过边长时，浏览器会等比缩小。一个 100×100 的盒子写border-radius: 80px，因为 80+80=160 > 100，浏览器会把两个半径都缩到 50px，最终变成正圆。这解释了为什么你写 80px 却得到了一个圆——它不是被覆盖了，是被规范化了。想精确控制必须保证单边不超过边长的一半。

规则二：border-radius: 50%是相对宽度和高度分别计算的。宽度 200、高度 100 的元素写50%，得到的是椭圆而不是圆。要做正圆头像，宽高必须相等，或者用aspect-ratio: 1锁住：

.avatar { width: 48px; aspect-ratio: 1 / 1; border-radius: 50%; object-fit: cover; }

规则三：支持斜杠语法分别指定水平和垂直方向的半径。border-radius: 10px 20px / 20px 10px前半段是水平半径，后半段是垂直半径，能做出口袋形这种特殊形状。这个语法在还原设计稿里少见的异形卡片时会用到。

规则四：四个值的顺序是左上、右上、右下、左下，顺时针。三个值时，第四个值等于第二个值（右上和左下相同）。两个值时是"上左/下右"和"上右/下左"的对角关系。记不住的时候我干脆四个值全写，虽然啰嗦但不会错。

5. 高频坑位与排查速查表

这一节是我这些年攒下来的零碎经验，很多是文档里不会写的。它们单独看不起眼，但每一个都让我在某个时刻多花了半小时以上。

5.1 overflow: hidden 的副作用清单

这个属性太好用，以至于很多人条件反射地到处加。我把副作用列清楚，你加之前心里有数：

最后那条"白边"我展开说一下，因为它太容易被当成"圆角没生效"。父元素有深色背景 + 圆角，子元素是浅色背景 + 相同圆角，因为抗锯齿的混合，两层圆角边缘不可能像素级重合，交界处会出现一条 1px 的浅色缝。解决办法不是加outline，而是让子元素背景透明、统一由父元素着色，或者把子元素的圆角写成比父元素稍小一点的值（比如父 12px、子 11px），让过渡落在父元素的背景上。

5.2 排查速查表

我把常见的现象和对应的排查动作整理成一张表，遇到问题时逐行对照，基本能在三分钟内锁到原因。

关于移动端的锯齿，补充一下：当元素被提升为合成层（比如有transform、opacity动画、will-change）之后，圆角的裁剪精度在某些环境下会下降，边缘出现毛刺或者直接变成直角。我遇到过的情况是父级overflow: hidden+ 子级transform: scale()，圆角在动画过程中消失了。加一句isolation: isolate到父元素上，或者把transform挪到外层，问题就没了。这类问题的排查思路是"把动画那段注释掉试试"，因为合成层的异常大多和动画有关。

5.3 几条不太写进文档的实操心得

心得一：先给父元素加个背景色，能省掉一半的排查时间。父元素透明的时候，你无法判断圆角到底是没生效还是被透出来了。给它一个半透明色，边界一目了然。

心得二：DevTools 里直接改，别改源码。圆角相关的问题往往需要反复试不同方案，改源码存盘刷新的循环太慢。Elements 面板里直接改border-radius、overflow、background-clip，看到效果再回填到代码里。我甚至习惯在 Console 里写一段脚本一次性试三种方案，肉眼对比。

心得三：组件库的圆角变量别硬编码。用border-radius: var(--radius-md)这类设计变量，将来换主题时不用全局搜。更要紧的是，如果某个组件的圆角被内部子元素吃掉了，你只需要修那一处，不用担心改坏别的地方。

心得四：给所有需要在圆角容器里定位的伪元素写上border-radius: inherit。这一行几乎零成本，但能省掉无数次"为什么遮罩是方的"的困惑。我在项目的样式规范里把它列成了强制项。

心得五：clip-path和overflow: hidden不要同时加。两个裁剪区域叠加，最终的裁剪区域是两者的交集，行为会变得难以预测，尤其是在圆角半径不一致的时候。选一个用就够了。

心得六：图片做封面时必须写display: block和object-fit: cover。前者去掉行内元素底部的基线空隙，后者保证不同尺寸的图都能铺满不拉伸。这两条和圆角没有直接关系，但缺了任何一个，圆角位置都会出现"贴不边"或者"被拉变形"的观感问题。

我在实际项目里的体会是，圆角这类"小问题"真正难的地方不在 CSS 属性本身，而在于你必须对"谁画了什么、画在哪儿、谁裁了谁"有一张清晰的图。一旦这张图建起来，border-radius、background-clip、overflow、clip-path、isolation这几个属性之间的关系就是自然而然的，遇到再奇怪的圆角失效，你也能在几分钟内定位到那一层。下次再碰到"背景色盖住圆角"，先别急着改border-radius的数值，把它临时调成50%看一眼——这一个动作往往就能告诉你答案在哪一层。