用伪元素+inset可实现旋转边框错觉：::before绘制放大带边框矩形并旋转，::after用inset遮盖内层留出纯边框，配合transform-origin和border-radius继承确保视觉精准。
用伪元素 + inset 实现旋转边框错觉
纯 CSS 无法让 border 自身“绕着按钮转”，但可以用 ::before 画一个更大的带色矩形，再用 ::after 遮掉中间——只留一圈边框在转。关键不是旋转边框，而是旋转“边框容器”。
常见错误是直接对 button 加 transform: rotate()，结果整个按钮连文字一起歪了，且边框锯齿明显。
-
::before设为position: absolute、width: 200%; height: 200%、border: 2px solid #ff722b，并加animation: rotate 5s linear infinite -
::after用inset: 2px（等价于top: 2px; right: 2px; bottom: 2px; left: 2px）盖住内层，颜色设为background: #000，z-index: -1 - 必须给
button加position: relative，否则伪元素定位会脱标 - 加
transform: translateZ(0)触发硬件加速，减少旋转卡顿和边缘毛刺
为什么 inset 比 margin 或 padding 更合适
inset 是 position: absolute 元素的专用偏移控制，它定义的是“距离包含块四边的距离”，不是内容或边框的内/外空间。用它来抠出固定宽度的边框区域，逻辑更干净、响应更可控。
如果误用 margin，伪元素会脱离文档流却仍影响布局；用 padding 则需额外包裹一层，增加 DOM 复杂度。
-
inset: 2px表示伪元素四边都向内缩进 2px，正好露出 2px 宽的旋转边框 - 改
inset值可直接调边框粗细，比如inset: 4px→ 边框变 4px - 不支持 IE，但现代浏览器（Chrome 87+、Firefox 63+、Safari 14.1+）已全覆盖
transform-origin 决定旋转轴心位置
默认 transform-origin: 50% 50%（中心点），但伪元素比按钮大一圈，中心旋转会导致边框“漂移”。要让边框看起来是“绕按钮边缘转”，得把轴心移到左上角或右下角。
- 设
transform-origin: left top，配合::before的绝对定位，能稳定形成“外框绕角旋转”的视觉锚点 - 若想边框像齿轮一样“咬合”按钮轮廓，可尝试
transform-origin: center+scale(1.02)微调，避免旋转时露底色 - 不要写
transform-origin: 0 0—— 数值单位缺失会导致部分 Safari 版本失效，必须带单位如0px 0px或用关键字
圆角边框旋转必须继承 border-radius
如果按钮本身有 border-radius: 8px，但伪元素没同步，旋转时会出现“直角边框滑过圆角按钮”的割裂感。
最简方案是让伪元素继承：在 ::before 和 ::after 中都加 border-radius: inherit。但注意，inherit 只对父元素显式声明的值有效，所以 button 必须有明确的 border-radius 声明，不能靠浏览器默认或重置。
- 若按钮圆角是
50%（即圆形），伪元素也需border-radius: 50%，否则旋转中会出现尖角穿出 - 多个圆角值（如
border-radius: 8px 16px 8px 16px）也能被inherit正确继承 - 慎用
overflow: hidden在 button 上——它可能裁掉伪元素的旋转轨迹，导致边框闪烁或截断
z-index 层级关系必须严格为 ::before → button → ::after，且 ::after 的 inset 值必须精确匹配边框宽度，差 1px 就会漏底色或遮过头。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
