纯css无原生lighten()函数，需用hsl()手动调高l值实现hover变浅，如hsl(200,100%,50%)→hsl(200,100%,70%)，并配transition:background-color 0.3s ease及:focus-visible可访问性支持。
用 lighten() 或 hsl() 调整亮度实现 hover 变浅
纯 CSS 里没有原生的 lighten() 函数，但可以通过 hsl() 手动提升亮度值（l 参数），或借助预处理器（如 Sass）的 lighten($color, 10%)。若项目未用 Sass/Less，推荐直接改写为 hsl() 值——因为 hsl() 的亮度通道可独立调节，且浏览器支持良好，过渡也自然。
-
hsl(200, 100%, 50%)是一个标准蓝；hover 时改成hsl(200, 100%, 70%)就能明显变浅，无需额外工具 - 如果原始色是十六进制（如
#007bff），可用在线转换器或浏览器开发者工具的拾色器直接读取对应hsl()值 - 避免用
rgba(0,0,0,0.1)叠加在深色背景上“假装变浅”，这实际是降低饱和度/增加灰度，不是真正的提亮
transition 必须作用于 background-color，而非 background
很多人写 transition: background 0.3s，结果 hover 时颜色跳变或无动画。这是因为 background 是复合属性，会触发对 background-image、background-position 等的隐式过渡，干扰颜色变化。真正要过渡的只是颜色本身。
- ✅ 正确写法：
transition: background-color 0.3s ease;，且必须放在非:hover的基础样式中 - ❌ 错误写法：
transition: background 0.3s;—— 若元素后续加了background-image，动画会失效或卡顿 - 若按钮已有渐变背景（
linear-gradient），background-color过渡无效，此时需用background简写 + 两个完整渐变值，但兼容性有限（Safari 16.4+ 才稳定支持）
触摸设备上 :hover 不可靠，:focus-visible 是必要补充
iOS Safari 和多数安卓 WebView 中，:hover 仅在首次点击后短暂触发，或根本不触发。单纯依赖 :hover 实现“变浅”会导致触摸用户完全看不到反馈。
- 必须同时定义
:focus-visible，用于键盘导航或触屏“模拟焦点”场景：.btn:focus-visible { background-color: hsl(200, 100%, 70%); } - 不要删掉默认
outline，除非你用box-shadow或边框明确替代它，否则会损害可访问性 - 真机测试时，用 Safari 的「开发 → 响应式设计模式 → 触摸模拟」可快速验证 hover 是否被忽略
别用 filter: brightness() 做 hover 变浅
虽然 filter: brightness(1.2) 看似简单，但它会强制触发层合成（layer promotion），导致重绘开销大，尤其在低端安卓机上容易掉帧；更严重的是，它作用于整个元素（含文字、子元素），可能把文字也“提亮”得发白看不清。
- ✅ 安全做法：只调
background-color或background的色值本身 - ❌ 风险操作：
.btn:hover { filter: brightness(1.2); }—— 在长列表或动画密集页中易引发性能抖动 - 若必须用 filter（比如处理图片按钮），请限定作用范围：
.btn img { filter: brightness(1.2); }，并确保父容器有will-change: filter缓冲
:focus-visible 的 fallback 逻辑和 hsl() 值的手动校准——自动生成的 hsl 转换常带小数位，而 CSS 动画对浮点精度敏感，建议把亮度值取整到 5% 步进（如 65%、70%、75%），避免过渡卡顿。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
