outline 不随 border-radius 圆角，因其绘制在元素外部且不参与盒模型；应使用 box-shadow 模拟，如 box-shadow: 0 0 0 2px #007bff，并在 :focus 中配合 outline: none 避免双轮廓。
outline 不会跟随 border-radius 圆角，这是设计使然
CSS 的 outline 是绘制在元素“外部”的独立轮廓线，它不参与盒模型布局，也不响应 border-radius。无论你把 border-radius 设成 8px 还是 50%，outline 永远是直角矩形——这不是 bug，是规范定义的行为。
想让轮廓线变圆？用 box-shadow 模拟 outline
真正能随 border-radius 自动圆角的，是 box-shadow。它受元素形状影响，包括圆角、clip-path（部分场景），且不会触发重排，性能比 outline 更可控。
- 用
box-shadow: 0 0 0 2px #007bff替代outline: 2px solid #007bff - 如果需要 focus 状态下显示，写在
:focus伪类里，别忘了加outline: none防止双轮廓 - 注意
box-shadow的扩散半径（第四个值）和颜色要匹配设计，否则看起来像发光而非轮廓 - 旧版 Safari（box-shadow 在 transform 元素上的渲染有偏移，如遇此问题，加
transform: translateZ(0)强制硬件加速
outline-radius 并不存在，别被搜索误导
网上有些文章提到 “outline-radius” 或 “outline-border-radius”，纯属虚构。CSS 标准里从未定义过该属性，所有浏览器都不支持。Chrome、Firefox、Safari 的 DevTools 里也搜不到这个配置项。
- MDN 和 caniuse 上查不到
outline-radius的任何记录 - 如果你在某个代码片段里看到它生效，大概率是误把
border-radius写成了outline-radius，但实际起作用的仍是前者 - 自定义轮廓圆角的唯一可靠路径，就是放弃
outline，改用box-shadow或border+outline-offset组合（后者仍不能圆角，仅微调位置）
focus-visible 和可访问性不能丢
用 box-shadow 替换 outline 后，键盘用户的焦点指示依然要清晰。别直接全局 *:focus { outline: none }，那等于砍掉无障碍支持。
立即学习“前端免费学习笔记（深入）”；
- 优先用
:focus-visible，只在键盘操作时显示轮廓：button:focus-visible { box-shadow: 0 0 0 2px rgba(0, 123, 191, 0.25); } - 确保颜色对比度 ≥ 4.5:1（可用 Chrome 的 Lighthouse 检查）
- 如果项目需兼容 IE 或旧 Edge，
:focus-visible需配合 polyfill，但更推荐渐进增强：默认保留 outline，再用 @supports 检测box-shadow支持后覆盖
