移动端金属按钮必须用3–4层linear-gradient叠加实现磨砂金属感，单层或双层因缺乏微结构散射、多向高光与底层漫反射而失效；需严格控制各层透明度、尺寸、角度及background-position配对，并针对ios safari优化:active反馈与渲染稳定性。
移动端金属按钮不是把桌面代码缩放过去就能用的，关键在纹理可见性、点击反馈和 Safari 渲染稳定性三处——直接套用双层渐变会糊成灰片，background-position 动画在 iOS 上大概率卡顿或失效。
移动端必须用 3–4 层渐变，单层或双层根本撑不起磨砂感
真实磨砂金属是微结构散射 + 多向高光 + 底层漫反射，单层 linear-gradient 只能拉一条色带，双层最多模拟镜面高光，但移动端屏幕小、像素密度高，纹理细节被压缩后直接消失。必须叠 3–4 层：
- 基底层：用
linear-gradient(135deg, #4a4a4a, #2e2e2e)，background-size: 200% 200%防止拉伸失真 - 纹理层：细密斜纹，
linear-gradient(45deg, rgba(255,255,255,0.03) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.03) 50%)，background-size: 8px 8px—— 低于rgba(255,255,255,0.02)在 Retina 屏下不可见 - 高光层：
linear-gradient(to bottom right, rgba(255,255,255,0.12), transparent 60%)，background-position: 10% 10% - 光晕层（可选）：
linear-gradient(120deg, rgba(200,200,220,0.08), transparent 70%)，background-size: 300% 300%
顺序不能错：background-image 里从下到上写基底 → 纹理 → 高光 → 光晕，后写的在上层。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
hover 在移动端无效，:active 和 tap-highlight 必须手动处理
iOS Safari 不触发 :hover，Android WebView 对 background-position 动画支持极差，直接写 button:hover { background-position: 15% 15% } 会导致点击无反馈或闪烁。
- 改用
:active做点击态：设深色基底渐变 +transform: scale(0.98)，别只调颜色 - 必须加
-webkit-tap-highlight-color: transparent，否则 iOS 点击蒙层盖住所有渐变效果 - 悬停动效改用
transition: transform 0.25s ease，锁定属性，不写transition: all—— 否则浏览器重绘全部图层，低端机明显卡顿 - 高光层位移幅度要小：
background-position: 10% 10%→15% 15%，大跳变在小屏上显得假
Safari 兼容性陷阱：别碰 background-blend-mode，坚持 rgba 叠加
有人想用 background-blend-mode: overlay 混合两层实色渐变省事，结果按钮泛白、层次全丢——background-blend-mode 是像素级混合，在 Safari 15.4 之前基本不工作，且吃掉渐变本身的明暗梯度，尤其浅灰区域失真严重。
- 所有高光/纹理层必须用
rgba()或hsla()，透明度明确（如rgba(255,255,255,0.03)），不能靠 blend mode “调”出来 - 方向关键词优先用
to bottom而非180deg，兼容性更稳；第二层渐变方向必须和第一层相反（如基底to bottom，高光层用to top），否则明暗打架 - 渐变写法必须是
background-image: -webkit-linear-gradient(), linear-gradient()，不能只写background:—— 否则 iOS 8–9 直接 fallback 到纯色
最易被忽略的是纹理层的 background-size 和 background-position 必须配对，否则 8px 斜纹在不同机型上或拉伸或碎裂；另外，所有 rgba() 的 alpha 值低于 0.02 就别指望在 iPhone 15 Pro 屏上看得见——这不是设计问题，是物理像素限制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
