border-radius仅视觉裁剪背景而不改变盒模型尺寸，需配合box-sizing: border-box、background-clip: padding-box或overflow: hidden等才能实现真正圆角效果。
圆角不是加个 border-radius 就完事——它会和边框、背景、阴影、滚动条甚至子元素打架，不干预盒模型行为，视觉上必然破相。
box-sizing: border-box 是圆角生效的前提
默认 box-sizing: content-box 下，width: 200px + padding: 12px + border: 2px solid #333 = 实际宽 228px，圆角裁剪的是这个“超纲”的矩形边界，导致内容被意外遮挡或外溢。更糟的是，Flex/Grid 子项若没显式设 box-sizing: border-box，flex: 1 分配的宽度只算 content 区，padding 和 border 会硬生生撑破圆角容器。
- 必须在关键元素（尤其是含
padding或border的 Flex/Grid 子项）上直接写box-sizing: border-box - 别依赖全局
* { box-sizing: border-box }，第三方组件可能用all: unset或revert覆盖它 - 用 DevTools 的「Computed」面板确认值是
border-box，而不是继承来的content-box
overflow: hidden 不是万能裁剪开关
overflow: hidden 只有配合 border-radius 才产生圆角裁剪效果；单独使用只是矩形裁剪。它裁的是“渲染结果”，不是“绘制逻辑”——如果父容器背景是渐变或图片，默认 background-clip: border-box 会让背景铺满边框外缘，圆角只是视觉遮罩，四角仍会透出“尖刺”。Safari 下这个问题尤其明显。
- 若目标只是让背景色/渐变贴合圆角内侧，优先用
background-clip: padding-box（需有实线边框） - 若需裁剪子元素（如悬出的箭头、伪元素），
overflow: hidden会直接砍掉它们，此时得换用-webkit-mask: radial-gradient(circle at center, #000 0%, #000 100%)强制兜底 - 动画中慎用：
transform: scale()过渡时 Safari 可能短暂脱钩裁剪上下文，出现“破框”闪现
box-shadow 和 border-radius 的渲染层级必须对齐
box-shadow 渲染在 border 外侧，受 border-radius 裁剪——但前提是元素得有“载体”：要么有背景色，要么有可见边框。否则阴影会绕过圆角，直挺挺地显示直角轮廓。常见错误是给空容器加 border-radius 和 box-shadow，结果在 Safari 里阴影完全不圆。
- 确保元素有
background-color或非透明border，作为阴影的裁剪锚点 - 避免盲目增大
spread值（box-shadow第四个参数），它会扩展阴影范围，超出圆角边界后又露出直角 - 嵌套结构中，检查父容器是否误设
overflow: hidden——它会把子元素的阴影按父容器原始矩形裁剪，而非子元素自己的圆角
滚动条溢出圆角框的修复必须用双层结构
单层容器加 border-radius + overflow: auto，滚动条伪元素（::-webkit-scrollbar）默认渲染在容器外层，无法被圆角裁剪。强行用 z-index 或 position 调整层级无效，因为滚动条不属于 CSS 渲染树的标准节点。
- 必须拆成两层：
.scroll-outer（设border-radius+overflow: hidden）包裹.scroll-inner（设overflow-y: scroll+padding-right补偿滚动条宽度） - 内层宽度要加补偿：
width: calc(100% + 6px)，同时padding-right: 6px预留滚动条空间 -
::-webkit-scrollbar-track和::-webkit-scrollbar-thumb的border-radius必须与外层圆角一致，否则视觉错位
最常被忽略的一点：圆角效果高度依赖上下文。没有背景色、没有边框、没有 overflow 控制、没有盒模型重置——任何一个缺失，border-radius 就只是个摆设，而不是你想要的“优雅”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
