用body伪元素可实现真正视口固定边框：body::before/after固定顶部底部，border-left/right实现左右边框，需设margin:0、固定height、高z-index；角边框用绝对定位+单向边框拼合；多层边框靠伪元素叠加与transform微调。
直接用 body 加伪元素就能实现真正“固定在视口边缘”的边框，不用额外 DOM、不干扰滚动、也不影响打印样式。传统四 div 方案现在基本可以淘汰了。
用 body::before 和 body::after 实现固定边框
核心是让两个伪元素分别撑满顶部和底部，并用 position: fixed 锚定到视口。左右边框则靠 body 自身的 border-left 和 border-right 实现，更轻量。
-
body必须设margin: 0，否则滚动条会偏移，边框对不齐视口边缘 -
body::before和body::after的height值要一致，且建议用固定像素（如12px），避免缩放时失真 - 如果页面有横向滚动，
left: 0; right: 0仍能覆盖整个视口宽度，但需确认z-index足够高（推荐9999或更高） - 伪元素默认不继承字体，无需担心
content: ""触发渲染问题
只显示四个角的边框：用绝对定位 + 单向边框
这不是靠 border 属性直接画出的“完整边框”，而是四个小块各自只画两条边，拼成角效果。适合装饰性 UI，比如卡片或弹窗。
- 父容器必须设
position: relative，否则子元素的absolute会相对于html定位 - 每个角元素用
width和height控制大小，再用border-top+border-left等组合出直角——不能只设border简写，否则四边都生效 - 注意
z-index：如果角元素被内容遮盖，得给父容器设z-index并触发层叠上下文 - 响应式下容易错位，建议配合
@media调整top/right值，或改用calc(100% - 10px)这类相对计算
多层边框：伪元素叠加 + transform 微调
单个元素想套两圈不同颜色/粗细的边框，又不想加 wrapper，就靠 ::before 和 ::after 叠两层。
立即学习“前端免费学习笔记（深入）”；
-
::before设为z-index: -1，::after不设或设为0，确保主边框在最上层 - 两层伪元素都要设
content: ""和position: absolute，且宽高需比原元素大（如top: -5px; left: -5px; right: -5px; bottom: -5px） - 如果要倾斜效果，别直接旋转整个伪元素（会破坏定位），改用
transform: rotate(0.5deg)配合transform-origin: center - 动画时慎用
box-shadow模拟边框——虽然性能好，但无法设置圆角或虚线样式
真正难的不是怎么画出来，而是怎么让它在缩放、滚动、打印、高对比度模式下都不崩。固定边框最容易漏掉的是 print 媒体查询里关掉它，而角边框在 iOS Safari 下可能因 transform 触发渲染异常——这些细节比写法本身更值得花时间验证。
