outline 不受 border-radius 影响，始终为直角矩形；这是浏览器规范行为，chrome、firefox、safari 均一致。真正实现内圆角需用 border、box-shadow、clip-path 或伪元素等替代方案。
outline 不能配合 border-radius 实现内圆角
直接说结论：outline 不受 border-radius 影响，无论怎么设置 border-radius，outline 始终是直角矩形。这是浏览器规范行为，不是写法错误。Chrome、Firefox、Safari 全部如此——outline 的绘制逻辑完全独立于盒模型的圆角裁剪流程。
为什么有人觉得 outline + border-radius 能出内圆角
常见误解来源有三个：
- 误把父容器的
border-radius当作作用在 outline 上（实际是父容器裁剪了子元素溢出） - 用
outline模拟边框时，同时加了带圆角的border，视觉上混淆了两者的边界 - 调试时临时关闭
border，但忘了outline本身不响应圆角，只看到“边框区域变圆了”，其实那是border的功劳
真正能实现边框内圆角的替代方案
需要“边框自身带内圆角”，本质是让边框路径跟随内容区圆角。可行方式只有这些：
- 用
border+border-radius：最直接，但会占据布局空间 - 用
box-shadow模拟边框：box-shadow: 0 0 0 2px #000，它会严格遵循border-radius，且不占 layout 空间 - 用
clip-path配合细边框：比如border: 2px solid #000+clip-path: inset(0 round 8px)，适合需要精确控制裁剪的情况 - 伪元素方案：
::after绝对定位 +border-radius+z-index层叠，灵活性高，但 DOM 和维护成本上升
例如用 box-shadow 替代 outline：
.rounded-box {
border-radius: 8px;
box-shadow: 0 0 0 2px #333; /* 这个“边框”会圆角 */
/* outline: 2px solid #333; ← 别这么写，它不会圆 */
}
outline 的真实适用场景和限制
outline 的设计目标从来就不是“装饰性边框”，而是可访问性焦点指示器。它的不可控圆角、不可单独设置单边、无法响应 border-radius，都是有意为之：
- 焦点环必须清晰可辨，直角更利于视觉识别
- 它不参与文档流，也不响应任何盒模型样式（包括
transform缩放时的像素对齐） - 若强行用
outline-offset拉远再套遮罩，属于 hack，不同浏览器 offset 渲染精度不一致，移动端尤其容易断裂
真要兼顾语义焦点与视觉圆角，正确做法是保留 outline（用于键盘导航），再用 box-shadow 或伪元素叠加视觉边框，并通过 :focus-visible 控制显示逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
