border-radius需配合overflow:hidden裁剪子元素、用calc()协调嵌套层级圆角、加transform:translateZ(0)修复阴影锯齿、用clamp()实现响应式缩放。
border-radius 怎么让内层元素不溢出圆角
外层容器设了 border-radius，但子元素（比如图片、按钮、阴影）还是直角顶到边缘，甚至破框——这不是 bug，是默认渲染行为。浏览器只对「自身有边框或背景」的元素裁剪圆角，子元素超出部分照常显示。
- 给子元素加
overflow: hidden（最常用，但注意会截断绝对定位子项） - 避免在子元素上设负
margin或大尺寸box-shadow，它们容易撑出圆角区域 - 如果用
background-clip: padding-box控制背景裁剪范围，需配合padding预留空间
多层嵌套卡片时 border-radius 的继承与重置
嵌套卡片不是“外层圆了，里面自动跟着圆”——border-radius 不继承，每一层都得单独设。但直接写死数值容易错位，尤其当外层 border-radius: 12px，内层也写 12px，视觉上反而像“脱节”。
- 推荐用相对单位：外层用
border-radius: 1rem，内层用border-radius: calc(1rem - 2px)，留出边框间隙 - 如果外层有
border: 2px solid #eee，内层圆角应比外层小至少2px，否则边框会“吃掉”圆角弧度 - 慎用
inherit：它继承的是计算值，但父元素若没显式设border-radius，子元素继承到的是0
border-radius 配合 box-shadow 产生锯齿或虚边
加了阴影后圆角边缘发虚、出现半透明毛边，常见于 Chrome 和 Safari。本质是抗锯齿算法在裁剪+阴影叠加时的精度丢失。
- 给容器加
transform: translateZ(0)或will-change: transform，触发硬件加速，改善渲染 - 避免用
inset阴影 + 圆角组合，它更容易暴露裁剪边界；改用两层伪元素分别实现内阴影和圆角 - 如果必须高清，可改用 SVG 作为背景，用
响应式卡片中 border-radius 的断点适配
PC 上用 12px 很自然，手机小屏上就显得太钝；反过来，移动端设 8px，桌面端又太尖。不能只靠媒体查询硬切，得考虑视觉比例。
- 用
clamp(6px, 2.5vw, 12px)：最小 6px（防过小），最大 12px（防过大），中间按视口宽度弹性缩放 - 避免在
@media (max-width: 768px)里直接写border-radius: 4px——4px 在 iPhone SE 屏上几乎看不出弧度 - 如果卡片带图标或头像，圆角值建议与图标尺寸保持比例关系，例如头像
width: 40px时，border-radius: 50%更协调
真正难的不是怎么写 border-radius，而是判断哪一层该裁、哪一层该露、阴影该在哪层画。很多“圆角不生效”的问题，其实卡在了 overflow 层级或 shadow 渲染顺序上，而不是数值本身。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
