box-sizing: border-box 是控制边框位置的根本解法，它将边框和内边距纳入 width/height 计算，使边框视觉“缩进”内部；box-shadow: inset 仅模拟装饰性内描边，不参与盒模型且无交互；border-image 配合 transparent 可实现特殊纹理内嵌效果但兼容性差；避免混用 border/outline/box-shadow 凑内边框，易引发可访问性、打印、缩放及性能问题。
box-sizing: border-box 是控制边框位置的根本解法
盒子默认的 box-sizing: content-box 会让边框和内边距“撑大”元素尺寸，看起来像边框在外部；改成 box-sizing: border-box 后，边框和内边距被算进 width/height 里，视觉上就“缩进”到内部了。
这是真正改变盒模型计算逻辑的方式，不是视觉欺骗。
- 所有现代浏览器都支持，无需前缀
- 建议全局重置：
* { box-sizing: border-box; }，避免后续反复写 - 注意：设置后，若原来按
content-box算的 width 值没调整，可能造成内容区域变窄 - Flex/Grid 容器子项默认也受此影响，需一并考虑布局预期
box-shadow: inset 能模拟内边框，但不是真边框
box-shadow: inset 只是加了一层阴影图层，它不参与盒模型计算，也不响应鼠标事件（比如 :hover 边框颜色变化会失效），更不能设置 border-radius 的圆角衔接。
适合做装饰性“内描边”，比如卡片浮层、输入框聚焦效果，但别拿来替代语义化的边框。
- 示例：
box-shadow: inset 0 0 0 2px #333;—— 模拟 2px 内边框 - 无法设置虚线、点线等
border-style效果 - 多层 inset 阴影叠加时，性能略低于纯 border
- 和真实 border 同时使用容易视觉打架，一般二选一
border-image 配合 transparent 可实现“视觉内嵌”错觉
这不是标准方案，但在某些特殊场景（比如需要渐变边框、纹理边框）下，用 border-image 把边框“画”在 padding 区域内侧，配合透明背景，能制造边框“贴着内容”的感觉。
本质是利用 border 绘制起点可偏移的特性，但兼容性和调试成本高，日常不用。
- 必须设
border-width，否则border-image不生效 - 需搭配
border-image-slice: 1和border-image-repeat: stretch控制裁剪 - Chrome/Firefox 支持良好，Safari 对
border-image-outset行为略有差异 - 调试困难：DevTools 不直观显示 border-image 渲染边界
为什么不要 mix border + outline + box-shadow 去“凑”内边框
有人试过用 outline 模拟外边框、border 设成透明、再叠一层 box-shadow: inset，以为能“三层合成内边框”。结果往往是：
- 焦点管理混乱：
outline默认随 tab 键触发，干扰可访问性 - 打印样式失效：大部分浏览器不打印
outline和box-shadow - 缩放失真：不同 DPI 下
box-shadow模糊半径表现不一致 - 动画卡顿：
box-shadow属性变更常触发重绘而非合成，比border-color切换慢
复杂度远超收益。真要动态控制边框内外，优先用 box-sizing 切换 + class 控制 width 和 color。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
