教学演示中突出按钮应使用box-shadow而非outline，因其支持圆角扩散、模糊控制和多层光晕叠加，视觉引导更强；outline不支持模糊且在旧safari中锯齿明显。
发光边框该用 box-shadow 还是 outline
教学演示中要突出一个按钮，box-shadow 是更可靠的选择。outline 虽轻量，但不支持圆角扩散、无法控制模糊程度，且旧版 Safari 渲染锯齿明显；而 box-shadow 可精准控制光晕大小、透明度和层次，视觉引导力强得多。
关键区别在于：outline 是“轮廓线”，box-shadow 是“光晕层”——教学场景需要的是后者那种能从按钮边缘自然晕开、吸引视线的发光感。
-
box-shadow支持多层叠加（逗号分隔），可模拟真实霓虹光衰减效果 -
outline无法设模糊半径，硬边框在投影幕布或高亮环境下容易被忽略 - 如果按钮用了
border-radius，outline在部分浏览器里会呈现直角，破坏整体感
box-shadow 多层写法常见错误及修正
很多人复制示例时直接粘贴多行 box-shadow 声明，结果只生效最后一层——因为 CSS 解析时只认最后一个同名属性声明，前面的全被覆盖。
正确写法必须把所有层写在同一行，用逗号分隔，不能换行漏逗号：
button.highlight {
box-shadow: 0 0 4px rgba(255, 215, 0, 0.6),
0 0 8px rgba(255, 215, 0, 0.4),
0 0 12px rgba(255, 215, 0, 0.2);
}
- 顺序很重要：靠前的值模糊小、透明度高，负责紧贴边缘的“实光”；靠后的值模糊大、透明度低，负责外扩的“虚光”
- 所有层的偏移值（前两个数字）必须都是
0 0，否则光晕错位，失去聚焦感 - 避免使用过大的模糊半径（如 >20px），投影仪画面或低分辨率屏上容易发虚、辨识度下降
教学场景下必须关闭的默认行为
演示时若用 :hover 或 :focus 触发发光，要注意浏览器默认样式干扰：
- Chrome/Firefox 默认给
button:focus加蓝色outline，和你的box-shadow叠在一起会显得杂乱——加outline: none清掉 - 如果按钮本身有
border，建议设为border: 2px solid transparent，避免发光被实线切割 - 移动端触控时
:focus不稳定，改用显式 class（如class="highlight"）配合 JS 切换更可控 - 别忘了加
transition: box-shadow 0.3s ease，否则光效突兀，学生注意力反而被“闪”走
投影环境下的颜色与对比度适配
教室投影仪普遍偏暗、色域窄，纯黄/青色发光在幕布上容易发灰甚至看不见。实测最稳妥的组合是：
- 主光色用
rgba(255, 215, 0, 0.7)（金黄）——比纯黄更耐投，比白光更聚焦 - 辅助层用
rgba(255, 165, 0, 0.3)（橙红）增强纵深感，避免单色光晕扁平 - 绝对避免
hsl()或hex纯色（如#ff0），投影仪对饱和色还原差，易失真 - 深色背景上发光更明显，但若页面本身是白底，建议加一层浅灰
background-color: #f8f8f8再套发光按钮，提升对比度
真正难的不是让光“亮起来”，而是让光在不同设备、不同光照条件下都稳稳落在学生视线上——多调两次投影仪亮度，比多加一层 box-shadow 更管用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
