企业官网建设流程全解析

做前端这些年，我发现一个特别有意思的事：很多用户说不出页面上哪里好，但就是觉得某个界面比另一个界面舒服。这种说不清的舒服，十次里有七八次来自圆角矩形。按钮、卡片、弹窗、头像、输入框，圆角矩形几乎是所有现代界面的默认形状。这篇文章我想把圆角矩形掰开揉碎讲一遍：先说说它在设计上的优势为什么成立，再回到前端把 border-radius 的底层规则和实战技巧都过一遍，最后附上我踩过的坑和可以直接照抄的落地方式。适合正在做 UI 还原的前端、想提升界面质感的开发者，以及需要和设计师对齐参数的产品或设计同学。

1. 圆角矩形到底好在哪：设计优势与使用场景

1.1 视觉亲和力与阅读引导

圆角最大的优势是降低视觉攻击性。人的视觉系统对尖锐的直角天然更敏感，一个满屏直角、大标题、密集边框的界面，看久了会有一种“硬邦邦”的压迫感。圆角矩形相当于把所有边界磨了一遍，让视线在元素边缘滑过去，而不是被直角“割”一下。这也是为什么面向大众消费者的产品，比如社交、电商、娱乐类应用，普遍比专业后台工具用更多圆角。

圆角还有很实际的阅读引导作用。当页面上同时存在多个卡片时，直角卡片边界清晰，但边界之间会形成一条条很硬的视觉分割线；圆角卡片则像是每个区块自己带了柔和的“收边”，视线更容易从一个内容块跳到下一个内容块。尤其是列表页和信息流页面，圆角能减少用户对背景边界的分辨成本，把注意力留在标题、缩略图和摘要上。

在业务上，圆角还经常被用来暗示可点击或可操作。比如一个输入框用了 6px 的圆角，用户会下意识觉得它是可以输入的“容器”；一个按钮用了 12px 的圆角，用户会觉得它是友好的、可点的。这种心理暗示不一定有严格的科学实验支撑，但大量界面早已验证：锐角元素更容易让人误判为静态装饰，圆角元素则更容易被当作可交互区域。

1.2 信息层级与品牌识别

圆角矩形不只是“好看”，它还是搭建信息层级的工具。同样页面上，大圆角通常服务于轻量、活泼的元素，小圆角服务于紧凑、专业的内容。很多后台系统会把表格、树形控件、数据面板保持 2px 到 4px 的极小圆角，把操作按钮、弹窗、提示条设为 8px 到 16px。这样用户一眼就能区分哪些是“数据承载区”，哪些是“操作触发区”。

从品牌角度看，圆角尺寸一旦统一，就会形成产品记忆点。你可以回忆一下常见的应用图标、订阅按钮、对话气泡，它们大多有自己的专属圆角比例。一个成熟的设计系统，通常会把圆角定义为设计令牌，比如 xs、sm、md、lg，而不是让每个开发者按心情写 7px、13px、18px。统一之后，页面才不会出现“这个按钮圆一点、那个卡片方一点”的杂凑感。

做前端时我特别强调统一，因为圆角是少数几个“单独看不明显、放一起立刻露馅”的属性。小圆角和大圆角单独出现都合理，但同一个卡片里按钮用 6px、图片用 20px、标签用 10px，视觉节奏就乱了。设计优势要通过一致性才能成立，零散的圆角反而会削弱层级表达能力。

1.3 圆角大小背后的设计心理学

圆角的大小不是一个随意的审美参数，它和内容的“重心”有关。小圆角更接近直角，会让人感觉稳定、严谨、速度快；中等圆角让元素成为一个明确的独立容器；超大圆角则会让元素更像气泡或胶囊，充满亲和力，但也会降低信息密度。

实践中，我习惯把圆角按场景分成几个等级。表格、输入框、下拉选择这类高频操作组件，用 4px 到 8px；卡片、弹窗、提示条这类块状容器，用 12px 到 16px；头像、标签、底部操作按钮这类强调“人格化”的元素，可以用 20px 以上。这个取值区间不是我拍脑袋定的，而是从设计还原可复现性出发：很多设计稿只标“圆角大一点”，落到前端就需要一个能被整除、能配图、能和其他元素对齐的具体值。

圆角半径一旦超过元素短边的一半，浏览器会自动等比缩放。也就是说，一个宽 200px、高 100px 的横幅，你把 border-radius 写成 50% 和 999px，视觉上都可能接近胶囊形。真正常见的误区是“越大越圆”，其实当相邻两个角的半径之和超过对应边长时，浏览器会压缩半径，结果未必是你想要的“全圆”。设计上要避免让用户感知到这种压缩，取值应当始终小于元素短边的一半。

1.4 适合与不适合的使用场景

适合圆角矩形的场景非常明确：卡片列表、头像、按钮、弹窗、消息气泡、数据可视化的标签块、步骤条、骨架屏。这些元素要么需要被快速识别为独立容器，要么需要传达友好的互动感。移动端尤其适合圆角，因为手指触控区域本身就偏大，圆角能让可视区域和点击区域的心理边界更贴合。

不适合的场景同样存在。数据密集型页面，比如财务明细表格、监控大屏、后台日志列表，强烈建议克制圆角。圆角会让单元格之间的边界变弱，多条数据排列时反而产生横向或纵向的视觉误差。还有一些需要极高严谨感的场景，比如证件照预览、盖章区域、精密参数面板，圆角会削弱“确定性”，这时候直角是更安全的选择。

我的判断标准很简单：如果这个元素是内容的主体载体，圆角帮助信息分块，那可以放心用；如果这个元素必须强调精确、连续、逐行对齐，圆角大概率会帮倒忙。设计优势一定要建立在正确场景上，否则再好看也是负担。

2. 前端实现圆角的底层原理：border-radius 是怎么工作的

2.1 从 border-radius 的四个角说起

前端实现圆角矩形最核心的属性就是 border-radius，但这四个字背后有几个容易忽略的细节。先看基础写法：一个值代表四个角全部相同；两个值时，第一个值对应左上和右下，第二个值对应右上和左下；三个值时，对应关系是左上、右上与左下、右下；四个值按顺时针方向依次为左上、右上、右下、左下。

/* 一个值：四个角相同 */ .card { border-radius: 12px; } /* 两个值：左上/右下 8px，右上/左下 16px */ .tag { border-radius: 8px 16px; } /* 四个值：左上 4px，右上 12px，右下 20px，左下 32px */ .bubble { border-radius: 4px 12px 20px 32px; }

最容易出错的是三个值。很多人默认三个值是左、右、上，实际并不是。border-radius 三个值的含义是：第一个值给左上角，第二个值同时给右上角和左下角，第三个值给右下角。如果不记得，就老老实实写四个值，或者借助开发者工具去核对。

还要注意 border-radius 不区分水平垂直时，它同时设置了水平和垂直半径。但在某些写法里，水平半径和垂直半径可以不一样，这就要提到斜杠和百分比了。

2.2 椭圆角与百分比取值

border-radius 支持水平半径 / 垂直半径的写法，斜杠前是所有角的水平半径，斜杠后是所有角的垂直半径。单独写border-radius: 4px其实等价于border-radius: 4px / 4px。但一旦写下border-radius: 50% / 30%，水平方向会按元素宽度计算，垂直方向按元素高度计算，结果就是一个椭圆角。

/* 正圆头像：水平垂直都取 50% */ .avatar { width: 80px; height: 80px; border-radius: 50%; } /* 压扁的椭圆角：水平半径按宽度一半，垂直半径按高度 30% */ .banner { width: 600px; height: 120px; border-radius: 50% / 30%; }

百分比的参考基准很容易被误解。水平方向的百分比参考的是元素自身的宽度，垂直方向的百分比参考的是元素自身的高度。这意味着一个宽高不一致的元素，border-radius: 50%并不是正圆，而是椭圆；只有正方形元素才会在 50% 下变成正圆。

还有一类写法是固定大值，比如border-radius: 999px。它的原理不是真的画一个 999px 的圆，而是让浏览器在半径总和超出元素尺寸时，按元素尺寸等比缩放。所以一个比较宽的胶囊按钮，写999px和写足够大的值结果类似。但这种写法的隐患是某些老内核浏览器对超大值的缩放表现不一致，我一般会改用50%或明确算出不超过短边一半的像素值。

百分比和大像素值不是随便用的，理解浏览器背后的缩放规则，才能在响应式布局里做出稳定效果。

2.3 圆角与内边距、边框、背景的实际关系

border-radius 并不会改变盒模型的尺寸。一个 200px 宽、100px 高的元素，即使设置 50% 的圆角，它在布局中占用的空间仍然是 200px 乘 100px。圆角只是把背景、边框和内部内容的可视边界裁切成了圆角轨迹，并不会让元素的占位区域变小。

边框和圆角的关系非常紧密。设置 border 之后，边框线会沿着圆角轨迹走，因此在圆角很大的元素上，边框的四个角会形成一个圆弧形的描边。如果你截取到边框的颜色和背景不同，比如一个白底卡片加上红边框，圆角区域的红边会随着半径变化，而不是像直角矩形那样简单地直来直去。倒角越明显，边框厚度对视觉的影响也越大。

内边距同样会影响圆角观感。按钮文字离边界太近时，圆弧部分会挤压文字和背景之间的距离，尤其是左下角和右下角，文字很容易贴到弧形边界上。所以要给文字、图标预留足够 padding，不能只把圆角写给元素，却不关心内容是否会“撞角”。一个稳妥做法是让 padding 大于等于圆角半径，至少保证主内容区域不会进入弧形收窄的部分。

背景方面，普通背景色和背景图会被自动裁切到圆角区域内，不需要额外处理。但背景图如果是平铺，且 corner 区域有图案，裁切后容易出现图案残边。通常把图片外围留出足够透明边距，或用裁切后不留白的设计图，比事后加内阴影更省力。

2.4 圆角穿透：border-radius 与 overflow 的联动

这是前端实现圆角时遇到最多的“穿透问题”。父元素设置了圆角，看起来是圆角了，但子元素如果有一个撑满父元素的背景块，这个子元素并不会自动跟着父元素的圆角被裁切。子元素背景会把直角露出来，哪怕父元素已经写了 border-radius。

/* 如果不加 overflow: hidden，子元素右下角会戳出父元素的圆角 */ .card { border-radius: 16px; overflow: hidden; } .card-image { width: 100%; height: 200px; background: url(...) center/cover; }

解决办法是给父元素加overflow: hidden。这个属性会用父元素的边框盒范围去裁切所有子内容，圆角轨迹也会成为裁切边界。但有两点要注意：一是 overflow: hidden 可能会剪掉原计划飘出的阴影或浮层，所以浮层、下拉菜单尽量不要放在被裁切的父容器里；二是 overflow: hidden 会改变滚动行为，如果内部有长列表且需要滚动，就不要直接用 overflow: hidden，而是在内部套一个滚动容器。

圆角穿透还会影响 box-shadow 吗？外部阴影本身是沿着元素圆角轨迹扩散出去的，所以不会被父元素裁掉，只是视觉上要注意阴影是否和圆角匹配。伪元素也同理，如果伪元素想要覆盖在圆角矩形上，必须让伪元素自身的 border-radius 和父元素一致，或者依靠父元素的 overflow: hidden 帮忙裁剪。

3. 前端实现圆角矩形的实战技巧与代码示例

3.1 基础元素圆角：按钮、卡片、输入框

实际项目里最好先定变量，再写组件。圆角变量一旦定义，后续统一修改就非常快。直接写在每个元素上的圆角值，后面改起来会让人头疼。

:root { --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; } /* 按钮 */ .btn { border-radius: var(--radius-sm); padding: 10px 18px; border: 1px solid transparent; background: #1677ff; color: #fff; } /* 卡片 */ .card { border-radius: var(--radius-lg); background: #fff; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); } /* 输入框 */ .input { border-radius: var(--radius-xs); padding: 8px 12px; border: 1px solid #d9d9d9; }

按钮的圆角不宜过大，否则会失去按钮的“触发感”；输入框的圆角过大会让光标和文字离边界太远，视觉上变得松散；卡片则适合在 12px 到 16px 之间，既能形成区块感，又不会占掉太多边角空间。不同组件用不同圆角不是随意为之，而是在视觉密集度和亲和力之间找平衡。

还要注意 hover、active、focus 状态下圆角不要无故变化。假设卡片 hover 时出现一圈边框，边框宽度从 0 变成 2px，圆角轨迹会因为描边宽度的变化出现轻微偏移。这时候最好是提前把 border 占位设好，或者用 box-shadow 替代边框，避免尺寸跳动。

3.2 渐变、阴影与圆角的搭配技巧

圆角元素配上渐变背景，是很多页面的默认操作。渐变方向、颜色分布和圆角的组合会直接影响质感：浅色渐变配小圆角显得干净，深色渐变配大圆角显得饱满。写渐变时要注意，background 默认从 padding-box 开始绘制，所以当按钮带边框时，渐变背景和边框之间容易漏出底色，最好先做一个简单的底色变量，再叠渐变。

阴影和圆角搭配时，最容易出现的问题是阴影比圆角大一圈，导致阴影在四个角显得“方”。box-shadow 虽然是沿圆角轨迹扩散，但如果使用多个阴影层，某些层会让边缘看起来发硬。一个稳妥技巧是给阴影再加一层极小的透明间距，或者用伪元素模拟柔和阴影。

.gradient-card { border-radius: 16px; background: linear-gradient(135deg, #667eea, #764ba2); box-shadow: 0 8px 24px rgba(102, 126, 234, 0.25); }

内阴影也是一个常见技巧。给圆角容器加内阴影，可以让内容区和边界产生层次感。但内阴影同样沿圆角走，半径和阴影模糊范围必须匹配。如果内阴影模糊半径太大，圆弧附近会出现一圈不自然的暗角，看起来像背景没铺满。

3.3 伪元素、背景图与圆角裁剪

图片卡片是圆角使用的高频场景。直接给 img 设置 border-radius 可以切出圆角，但图片一旦使用 object-fit: cover 填充，裁剪细节会比较微妙。一张横向图放进固定高度的圆角容器，如果只给 img 设置圆角，图片边缘不会跟随容器的内边距，反而可能出现角落弧度和文字区不匹配的情况。

.card { border-radius: 16px; overflow: hidden; } .card img { width: 100%; height: 200px; object-fit: cover; display: block; }

最安全的做法是把圆角写在父容器上，并用 overflow: hidden 裁剪内部图片。这样图片不管怎么裁切，最终看见的都是父容器的圆角轮廓。伪元素也是同样的思路：如果要在圆角卡片上加遮罩、高亮或装饰条，伪元素自己的 border-radius 要和父容器保持一致，否则遮罩的直角会破坏圆角。

渐变圆角边框算是一个进阶技巧。因为 border-image 不兼容 border-radius，所以不能用 border-image 直接做圆弧边框，常见的做法是用背景叠加模拟。原理是外层底色填到 border-box，内层内容背景填到 padding-box，再把透明边框露出来作为渐变效果。

.gradient-border-card { border: 2px solid transparent; border-radius: 16px; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, #fa709a, #fee140) border-box; }

这种写法很常用，但要注意 background 的层叠顺序不能颠倒，否则内层背景会覆盖边框区域。它的兼容性在现代浏览器里没问题，如果遇到老浏览器，就退而求其次，用父容器做渐变背景，内部再叠一层白底圆角元素。

3.4 响应式与自适应圆角的方案

圆角在响应式页面里最大的问题是“写死”。设计稿在 1440px 下给了 20px 圆角，到了 375px 手机上还保持 20px，视觉上可能过大。尤其是一些卡片在手机端几乎占满整屏宽度，圆角会让上下边缘奇怪地向内收缩。

一种做法是使用 clamp 函数让圆角随视口变化，但我不建议让圆角变化幅度太大。圆角承担的是稳定的标识作用，变化太大会让同一组件在不同尺寸下看起来不像同一个组件。我更推荐固定几个档位，并用媒体查询覆盖变量：

:root { --radius-card: 16px; } @media (max-width: 640px) { :root { --radius-card: 12px; } } .card { border-radius: var(--radius-card); }

如果一定要让圆角随容器宽度连续变化，可以使用容器查询单位。但这属于较新的能力，使用前要确认目标浏览器的支持范围。当容器宽度不确定时，比如列表项有时两列有时三列，容器查询单位会比视口单位更准确。不过很多团队只是简单做了移动端适配，媒体查询加变量已经够用，不必为了连续变化引入过多复杂度。

3.5 组件库场景下的圆角定制

在实际项目里，大部分人不是从零写 UI，而是用组件库或后台框架。这时候圆角的定制方式要看组件库的变量体系。如果组件库使用 CSS 变量，直接覆盖根节点变量即可；如果组件库使用预处理器变量，就需要在构建前修改对应变量，改完重新编译。

/* 覆盖组件库的 CSS 变量 */ :root { --btn-border-radius: 8px; --card-border-radius: 16px; --input-border-radius: 6px; }

使用组件库时，我通常不建议大面积覆写圆角，因为组件库内部可能依赖圆角去做选中态、气泡定位或焦点框。盲目把每一个圆角都调大，很容易让下拉菜单的箭头、标签的关闭按钮、弹出的气泡边缘对不齐。正确的做法是只覆盖少数几个高频组件，比如按钮、卡片、输入框，其他特殊组件保持默认。

如果组件库没有暴露圆角变量，比如用的是带前缀的 class，就可以用属性选择器或多 class 覆盖。但要小心优先级，不要为了覆盖圆角而写出一堆!important。更合理的做法是先查组件库文档，看圆角是否跟随主题变量，再决定覆盖策略。

4. 圆角矩形相关的常见问题与排查实录

4.1 四个角为什么看起来不一致

圆角看起来不一致，最常见的原因是宽高比不同。一个 200px 宽、80px 高的元素，如果四个角的像素半径相同，左上和右上这两个角在长边上会显得更“平缓”，因为弧线在更长的边上展开；左下和右下角因为靠近短边，会显得更“圆”。这其实是正常现象，不是写错了。要消除这种差异，可以减小圆角半径，让弧线不至于在长短边上产生明显不同的视觉感受。

还有一种情况是 border-radius 被浏览器自动缩放。当四个相邻角的半径之和超过元素尺寸时，浏览器会按比例压缩所有半径。比如一个 120px 宽的标签，你写了左上角 80px、右上角 80px，两个相邻角在顶边上的总半径已经超过 120px，浏览器会把它们压到 60px 左右。视觉上看起来两个角并不是 80px，但这正是标准的实现。

排查方法很简单：用开发者工具选中元素，看 border-radius 的计算值。浏览器会标出实际生效的半径，如果和你写的值不一样，就说明触发了等比缩放。这时候应该把两个相邻角的半径改成合理大小，而不是继续加大数值。

4.2 圆角区域的背景、边框显示问题

圆角背景最常见的显示问题是底色溢出到边框外。比如一个元素设置了 16px 圆角，但内部有个子元素是全宽背景，子元素不会自动跟随圆角，所以角落会露出子元素的直角。除非父元素有 overflow: hidden，否则这个直角会一直存在。遇到这种情况，先加 overflow，再检查子元素是否还需要保留自己的圆角。

渐变边框的显示问题也很典型。很多人给元素写 border 和 border-radius，然后设置 border-image，结果发现圆角失效了。因为 border-image 会覆盖 border-radius 的圆角轨迹，浏览器会把边框区域按照 border-image 的方式绘制，圆角无法作用。解决办法就是用上一节说过的 background-clip 模拟渐变边框，或者把渐变直接画成 SVG 背景。

还有一种情况是背景图片在圆角区域边缘发白。原因是图片缩放或平铺后，圆角裁切边缘会和像素边缘重叠，产生锯齿或半透明像素。可以给容器加一点点内阴影，或者用 background-origin 调整图片绘制区域。图片边缘发白问题在深色背景的白底图上尤其明显，建议在图片外面预留裁切边距。

4.3 移动端与桌面端的圆角表现差异

移动端圆角的主要差异来自点击高亮和字体抗锯齿。很多浏览器在点击一个可交互元素时，会先显示一个半透明的矩形高亮区，这个高亮区在部分内核中不会严格跟随圆角，看起来像是方形闪了一下。解决办法是设置-webkit-tap-highlight-color: transparent，但要记得给焦点状态补充清晰的可见样式。

button, a, input { -webkit-tap-highlight-color: transparent; } button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid #1677ff; outline-offset: 2px; }

移动端还有设备像素比的问题。Retina 屏幕上 1px 的边框会显得比桌面端粗，圆角弧线上也更容易出现锯齿。解决方法是让边框使用 0.5px 或 1px 加透明度的组合，或者使用 transform: scale 模拟细边框。不过视觉细节不值当在每一处都追求完美，优先保证关键卡片和按钮的边缘干净即可。

另外，小程序或 WebView 场景下，部分控件有自己的默认圆角，比如输入框的 number 键盘按钮、select 的选择箭头，这些默认样式不被 border-radius 控制。要调整的话，需要设置appearance: none后再用自定义样式覆盖。

4.4 圆角与阴影、模糊效果的渲染性能问题

圆角本身对性能影响有限，真正拖慢页面的是和圆角一起用的 box-shadow 和 filter 模糊。当一个页面里有很多大卡片，每张卡片都带多层阴影、半透明背景和圆角时，滚动和动画阶段 GPU 要不断重绘这些边缘。尤其是移动端低端设备，能明显感觉到帧率下降。

我的建议是控制阴影数量。一个页面最多让核心卡片带阴影，列表项、输入框、标签这类高频元素尽量使用边框或更浅的背景色来区分。如果必须给许多元素加阴影，优先考虑用父容器统一释放阴影，而不是每个子元素单独加。

动画场景下，尽量只改变 transform 和 opacity，不要频繁改变 border-radius 或 box-shadow 的数值。hover 时让阴影颜色或透明度变化，比让阴影从 4px 变大到 12px 更流畅。如果某些元素在独立滚动容器里持续重绘，也可以给这个容器开启will-change: transform，但不要滥用，否则会占用过多内存。

4.5 圆角在打印和截图场景的坑

圆角在打印时通常能正常显示，但背景色和背景图默认不会被打印。很多浏览器在打印时会去除背景，只有文字、边框和圆角轨迹被保留，导致卡片变成白底方框加圆弧描边。如果需要打印出带背景色的圆角样式，要给目标元素设置print-color-adjust: exact，并在打印样式里单独控制。

@media print { .card { print-color-adjust: exact; -webkit-print-color-adjust: exact; } }

截图场景里常见的坑是透明 PNG 导出时圆角边缘发黑。这是因为截图工具生成透明背景时，圆角边缘的半透明像素叠加了黑色底色。如果导出的图片要放到深色页面上，发黑边缘就会很明显。解决办法是导出时保留白底或灰底，或者在图片外再包一层同色背景的圆角容器。

还有一点是截图工具在高分屏下容易截图模糊。页面上那些小于 2px 的圆角在普通缩放比例下看得清，缩放到 150% 或 200% 时可能会出现像素偏移。建议在验收截图时固定缩放比例，不要用浏览器窗口缩放来检查圆角边缘。

5. 一个可以照抄的圆角落地做法：从设计稿到组件复用

5.1 先定半径变量再写组件

如果你最近要做一个新页面，我建议先别急着写样式。把设计稿里的所有圆角标注先收集起来，归类后你会发现其实只有几档：小的用于输入框和标签，中的用于按钮和提示条，大的用于卡片和弹窗。把这些数值提取成变量，后续写任何一个组件时都通过变量引用，而不是到处写魔术数字。

建立变量的过程最好和设计师一起确认。如果没有设计师，就按产品调性自己定。比如面向 C 端的活动页可以用 16px 到 20px 的大圆角，面向 B 端的数据管理后台用 4px 到 8px 的小圆角。变量建立后，代码里的可维护性会立刻提升：产品说“所有卡片圆角再大一点”，你只需要改一个变量。

:root { --radius-input: 6px; --radius-btn: 8px; --radius-card: 16px; --radius-modal: 20px; }

我还会把圆角变量和间距变量放在一起看。圆角 16px 的卡片，内边距如果只有 8px，视觉上会显得局促；内边距 24px 的卡片，圆角却只有 4px，又会显得线条生硬。圆角和留白是配套的，不能只改一个而不看另一个。

5.2 交互状态下的圆角检查清单

组件做出来后，我会过一个圆角检查清单。先看静态状态，包括默认、hover、active、focus 四个状态的圆角是否保持一致。再看内容场景，比如按钮在加载状态时出现 spinner，spinner 是否会被圆角裁切；卡片在加载骨架屏时，骨架块的圆角是否和卡片圆角层级匹配。最后看响应式，移动端窄屏下圆角是否显得过大，桌面端宽屏下圆角是否显得过小。

更多时候问题出现在组件的边缘场景。比如一个列表项左侧有图标，图标自带圆形背景，列表项又是圆角矩形，两者叠加时如果圆角追不上图标背景，就会露出“圆角里套一个更圆的角”的怪异感。这时候要么把图标背景的圆角调成和列表项一致，要么给列表项加 overflow: hidden，让图标背景跟着裁切。

检查时最好把浏览器缩放到 150% 以上，因为小圆角在 100% 下不容易看出问题，放大后锯齿、白边、背景溢出都会暴露。这一步很值得做，很多线上问题就是只看了开发预览没看放大细节。

5.3 后续可以继续扩展的方向

圆角矩形这个主题看起来小，但扩展方向很多。比如你可以继续研究浏览器对相邻圆角半径的缩放算法，把它写成视觉校验函数；也可以把圆角变量接入设计令牌，让主题切换时所有组件自动换角；还可以在 Canvas 或 SVG 里实现圆角矩形，用于图表标签、海报导出、游戏界面。

我个人在实际操作里有个习惯：在所有变量定好后，把页面缩小到 320px 宽再放大到 1440px，逐个检查卡片圆角。因为很多圆角问题只会在响应式尺寸切换时暴露，纸上谈兵永远不如实际拖动几个断点来得直观。圆角矩形的设计不是越圆越好，也不是越少越好，而是让每个角的大小都配得上它承载的信息和用户对它的预期。做到这一步，这个小技巧就算真正提升了你的页面质量。