HTML怎么让加入购物车按钮在鼠标滑过时发光-html教程-PHP中文网

最稳妥的css发光效果是用:hover配合box-shadow加transition：box-shadow: 0 0 12px 4px rgba(100,200,255,0.6)，transition: box-shadow 0.3s ease，同时兼顾移动端:active反馈与高对比度模式后备方案。

html怎么让加入购物车按钮在鼠标滑过时发光

用 CSS `:hover` 配合 `box-shadow` 实现发光效果

发光本质是加一层柔和的外阴影，box-shadow 是最直接、兼容性好、不干扰布局的方式。别用 text-shadow（只对文字有效）或强行改背景色（不是发光）。

常见错误：阴影太硬、颜色太亮、没设 transition 导致闪烁或突兀。下面是最稳妥的写法：

box-shadow: 0 0 12px 4px rgba(100, 200, 255, 0.6) —— 模糊半径 12px、扩散半径 4px 控制光晕大小，rgba 保证通透不刺眼
必须加 transition: box-shadow 0.3s ease，否则鼠标一进一出就是“啪”一下闪，体验很差
按钮本身要有明确的 border 或 background，否则发光没参照，看起来像在“浮空”

按钮 HTML 结构要带 class 且避免内联样式

别写 <button style="..."></button>，那样没法单独控制 :hover。用 class 才能干净分离状态：

<button class="add-to-cart">加入购物车</button>

对应 CSS：

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

.add-to-cart {
  background: #4a90e2;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  transition: box-shadow 0.3s ease;
}
.add-to-cart:hover {
  box-shadow: 0 0 12px 4px rgba(100, 200, 255, 0.6);
}

如果按钮用了 outline: none，记得保留 focus 状态的发光（可选但推荐）：&:focus { box-shadow: ... }，方便键盘用户。

移动端和高对比度模式下要注意什么

纯靠 :hover 在手机上基本无效——手指点下去没有“滑过”过程。所以不能只依赖它：

触摸设备会触发 :active，可补充：&:active { transform: scale(0.98); } 给点击反馈
Windows 高对比度模式下，box-shadow 可能被强制忽略。如果项目需无障碍合规，建议同时加一个微弱的 border-color 变化作为后备
不要用 filter: drop-shadow() 替代 box-shadow，它性能更差，且对圆角按钮渲染不一致