box-shadow 是购物车按钮边框高亮的首选，因其可精准控制光晕厚度、扩散与透明度，兼容现代浏览器；必须用单条多层声明如 box-shadow: 0 0 4px #2575fc, 0 0 12px rgba(37, 117, 252, 0.5)，且偏移值须为 0 0。
直接用 outline 加高亮是错的——它不支持模糊、圆角或颜色渐变，纯属可访问性焦点提示，不是发光边框。真正可用的边框高亮，必须用 box-shadow 多层叠加或 border-image 动画。
为什么 box-shadow 是购物车按钮边框高亮的首选
购物车按钮需要明确的视觉反馈（比如点击后短暂高亮），box-shadow 能精准控制光晕厚度、扩散方向和透明度，且兼容所有现代浏览器，包括 Safari 16+ 和 iOS WebView。
- 必须写成单条声明、多层逗号分隔：
box-shadow: 0 0 4px #2575fc, 0 0 12px rgba(37, 117, 252, 0.5)；重复写多行box-shadow会被覆盖 - 所有层的前两个值（水平/垂直偏移）必须为
0 0，否则光晕会偏移，失去“包裹边框”的效果 - 深色背景（如
#121212）下推荐用rgba(37, 117, 252, 0.6)；浅底则改用更饱和的蓝或紫，避免发灰 - 不要在
:hover里堆 5 层以上阴影——旧版 Safari 渲染会抖动，iOS 系统开启“降低透明度”时发光强度也会被压制
border-image 实现流光边框要绕开三个坑
如果按钮需动态流光（比如悬停时色带滚动），border-image 比伪元素方案更稳，但极易因配置缺失失效。
-
border-width必须显式设置（如border: 3px solid），否则border-image不渲染 -
border-image-slice: 1缺一不可，漏掉会导致渐变被裁成色块，看不出流动感 - 动画不能只改
border-color——CSS 不支持该属性的渐变过渡，必须用@keyframes切换整个border-image-source - 示例关键段：
border-image: linear-gradient(90deg, #2575fc, #00c9ff) 1; animation: borderShine 3s linear infinite;
移动端购物车按钮的边框高亮必须考虑触控区
按钮本身可能只有 32×32px，但 WCAG 要求最小触控区 ≥ 44×44px。直接放大边框会破坏布局，正确做法是靠 box-shadow 扩展视觉边界，同时保持点击热区准确。
- 给按钮加
padding: 8px保证内容可读，再用box-shadow: 0 0 0 4px rgba(37, 117, 252, 0.3)模拟“外扩边框” - 避免用
outline+outline-offset模拟——Chrome 对 offset > 6px 渲染不稳定，Firefox 可能完全不显示 - 禁用状态（
disabled）下仍要保留高亮结构，只是降低 opacity，否则用户无法分辨按钮是否生效 - 实机测试重点：iOS “辅助功能 → 降低透明度”开启后，所有
rgba()的 alpha 值要 ≥ 0.4，否则发光消失
最易被忽略的是：发光参数和背景色强耦合。同一套 box-shadow 在 #000 和 #fff 上表现天差地别，上线前必须双背景验证，不能只看设计稿。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
