CSS移动端解决阴影遮挡效果_利用box-shadow设置外扩散距离

张开发
• 2026/4/10 13:10:54 • 15 分钟阅读

最新文章

推荐文章

相关文章

分享文章

CSS移动端解决阴影遮挡效果_利用box-shadow设置外扩散距离
box-shadow外扩散失效主因是父容器overflow隐藏、层叠上下文触发或参数误设需检查overflow/transform/filter影响用translateZ(0)强制分层伪元素移出阴影合理组合inset与外扩并控制扩散距离≤8px。box-shadow 外扩散距离失效的典型表现移动端用 box-shadow 想实现外扩阴影比如按钮按下时阴影变大结果阴影“被裁掉”或根本看不见——不是代码写错了是父容器或自身触发了层叠上下文、溢出隐藏或者没设对扩散半径和偏移量。常见错误现象? 阴影只显示一半右边/下边被截断? box-shadow 值明明写了 0 0 12px 4px rgba(0,0,0,0.15)但看起来像没加? iOS Safari 中阴影突然消失安卓正常检查父元素是否设置了 overflow: hidden 或 overflow: clip —— 这是最常踩的坑尤其在轮播、卡片列表、Modal 内部box-shadow 的第四个参数扩张距离为正值才外扩负值会向内收缩别写反移动端默认缩放或视口设置可能让像素计算失真建议用 rem 或 px 明确单位避免用 em 或百分比iOS Safari 下 box-shadow 被吃掉的兼容处理iOS 15 的 WebKit 对层叠上下文更敏感即使没设 overflow: hidden只要父元素有 transform、will-change 或 filter就可能剪裁子元素的 box-shadow。给阴影元素加 transform: translateZ(0) 或 will-change: transform强制创建独立层绕过渲染裁剪逻辑避免在父级上同时使用 border-radius 和 overflow: hidden —— 这组合在 iOS 上对 box-shadow 是“双重封印”如果必须用圆角容器把阴影移到伪元素上::after 绘制阴影本体只负责内容两者脱离同一渲染层用 inset 外扩组合实现“按压膨胀”动效纯外扩阴影做交互反馈容易突兀配合 inset 阴影能模拟真实按压感但要注意两者的叠加顺序和层级关系。 arXiv Xplorer ArXiv 语义搜索引擎帮您快速轻松的查找保存和下载arXiv文章。

更多文章