应给登录框容器（如.login-box）设置box-shadow而非text-shadow或body阴影；需确保容器有尺寸、无overflow:hidden、父容器定位正确，并配合border-radius使用rgba低透明度阴影。
用 box-shadow 给登录框加阴影，别碰 text-shadow
登录框阴影是视觉层级的关键，但很多人误用 text-shadow 或给 body 加阴影——这根本不会影响登录框本身。真正起作用的是给登录框容器（比如 <div class="login-box">）设置 <code>box-shadow。
常见错误现象：阴影不显示、边缘发虚、在移动端被裁切。原因通常是容器没设 padding 或 overflow: hidden，又或者父容器设置了 overflow: hidden 把阴影截掉了。
-
box-shadow语法：box-shadow: offsetX offsetY blurRadius spreadRadius color；常用组合如0 4px 12px rgba(0,0,0,0.15) - 必须确保登录框有明确宽度、高度或最小尺寸（
min-width/min-height），否则阴影可能塌陷不可见 - 如果登录框用了
position: absolute，注意检查其父容器是否设置了position: relative，否则阴影位置会飘移
阴影太重或太淡？调 rgba() 里的透明度别硬改数值
直接写 #000000 当阴影色，结果黑得像墨块，这是最常踩的坑。阴影本质是“弱化存在感”，不是强调边框。
正确做法是用 rgba(0, 0, 0, 0.1) 到 rgba(0, 0, 0, 0.25) 这个区间。数值超过 0.3 就容易显得沉重，尤其在浅色背景上。
-
blurRadius控制模糊程度：8–16px 比较自然；小于 4px 像描边，大于 24px 容易糊成一团 -
offsetY推荐用正数（如4px），模拟自然光源从上往下照的效果；负值会让阴影浮在框上方，反直觉 - 避免同时设很大的
blurRadius和spreadRadius，叠加后容易导致边缘过度膨胀，尤其在小尺寸登录框上明显
响应式下阴影消失？检查媒体查询里有没有漏掉 box-shadow
很多人在 PC 端调好了阴影，一缩浏览器窗口就没了——不是 CSS 失效，而是媒体查询里只写了 padding 或 font-size，忘了同步重置 box-shadow。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
更隐蔽的问题：某些 UI 框架（比如 Bootstrap）的 .container 或 .row 默认带 overflow: hidden，在小屏时会把外扩的阴影直接裁掉。
- 在
@media (max-width: 768px)里显式写一遍box-shadow，哪怕和桌面端一样 - 若用 Flex/Grid 布局，确认登录框父容器没设
overflow: hidden；真需要裁切内容时，改用clip-path更安全 - 移动端 Safari 对
box-shadow的渲染偶尔有延迟，加transform: translateZ(0)可触发硬件加速（仅当出现闪烁或卡顿时启用）
阴影和圆角一起用，别让 border-radius 和 box-shadow 冲突
登录框通常带圆角，但 border-radius 设了 8px，阴影却还是方的——这是因为 box-shadow 默认按原始矩形投射，不会自动跟随圆角弧度。
解决方法很简单：只要容器本身有 border-radius，且没设 overflow: hidden，现代浏览器就能自动让阴影边缘柔化匹配。但前提是不能破坏这个前提。
- 确保登录框元素自身设置了
border-radius（比如border-radius: 8px），而不是只给内部子元素设 - 绝对不要在登录框上设
overflow: hidden，否则阴影会被直接剪掉——圆角效果可以保留，但阴影会消失 - 如果用了伪元素（
::before/::after）模拟阴影，不如直接用box-shadow；多一层 DOM 和计算，还容易在缩放时错位
