新拟态按钮必须满足背景纯色、元素同色、边框透明三硬条件，用两层inset阴影模拟光照：亮边4px 4px 8px #f9f9f9（右下），暗边-4px -4px 8px #e0e0e0（左上），顺序错则立体感翻转。
新拟态按钮不是加个阴影就完事——它必须同时满足背景纯色、元素同色、边框透明这三个硬条件，否则看起来就是灰蒙蒙一块，毫无立体感。
box-shadow 必须用两层 inset 且顺序不能错
新拟态的“凸起”或“凹陷”感，全靠一对方向相反的
阴影模拟物理光照。关键不是“有没有阴影”，而是“哪层在前、偏移正负、颜色深浅”：
亮边必须是
（右下偏移，偏白高光），暗边必须是
（左上偏移，略深暗影）
顺序反了（比如先写暗边再写亮边），立体方向会翻转，按钮看起来像被挖进去而不是浮出来
颜色不能直接用
或
：高光用
易刺眼，推荐
；暗影比背景深 10–15%，比如背景是
，就用
iOS Safari 对 subpixel 渲染弱，偏移量建议取偶数（
而非
）
background-color 和页面背景必须完全一致
这是最容易被跳过的一步。只要
和外层容器背景色有哪怕 1 个 hex 差异，双阴影就会穿帮，边缘发虚、立体感崩塌：
别假设“都是浅灰就行”，要复制粘贴同一色值，例如
如果页面背景是渐变或图片，新拟态直接不可用——它只认纯色背景
使用 CSS 自定义属性时，确保
在根和按钮中同步，避免作用域污染导致不一致
border 必须为 transparent，且不能省略声明
不等于
。前者仍可能触发浏览器 UA 样式残留，后者才能真正让内阴影自然过渡到边缘：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
立即学习
“
前端免费学习笔记（深入）
”；
必须显式写
（宽度建议与
匹配，如
圆角配
边框）
漏掉这行，Safari 下常出现阴影被裁、圆角处断层
不要用
替代，它不参与盒模型计算，无法支撑内阴影的渲染逻辑
移动端和可访问性里最隐蔽的坑
新拟态在桌面端看着舒服，一上手机或给读屏器用，问题立刻暴露：
文字对比度普遍低于 WCAG 4.5:1 要求：
放在
上只有 ~2.3:1，必须改用
或加
禁用状态不能只设
，要叠加一层
暗影强化“压下去”的反馈，否则用户无法感知状态变化
盲人用户依赖屏幕阅读器识别按钮，而新拟态常因低对比+无边框被跳过——必须保留
和语义化
悬停效果在触屏设备无效，
必须搭配
和
才能覆盖全交互路径
真正难的不是写出那两行
，而是从设计稿开始就锁定背景色值、全程校验对比度、并在禁用/焦点/高对比模式下逐个验证视觉反馈是否成立。
inset4px 4px 8px #ffffff-4px -4px 8px #e0e0e0#000#fff#ffffff#f9f9f9#f5f5f5#e0e0e04px3.5pxbackground-color#f5f5f5--bg-colorborder: noneborder: transparentborder: 2px solid transparentborder-radius12px2pxoutline#666#f5f5f5#333text-shadow: 0 0 1px #fffopacity: 0.5insettype="button"aria-label:hover:focus:activebox-shadow