CSS Box Shadow 在 iPhone 上不起作用答案

【问题标题】：CSS Box Shadow not working on iPhoneCSS Box Shadow 在 iPhone 上不起作用
【发布时间】：2013-03-15 19:26:27
【问题描述】：

由于某种原因，我无法在 iPhone 上的 Safari 或 Chrome 上显示 CSS box-shadow。代码如下：

input.error {
  box-shadow: 0 0 5px 1px rgba(224, 39, 14, 1);
  -webkit-box-shadow: 0 0 5px 1px rgba(224, 39, 14, 1); 
  -moz-box-shadow: 0 0 5px 1px rgba(224, 39, 14, 1);
}

代码正在用于 HTML 输入字段，这会导致任何问题吗？我做错了什么？

在浏览器中显示正常...

【问题讨论】：

iPhone iOS will not display box-shadow properly 的可能重复项

标签： html css

【解决方案1】：

如果在表单块中，添加

-webkit-appearance: none;

iPhone 可能会弄乱表格。见here。

【讨论】：

解决了我的问题框阴影没有出现在移动 safari 中

【解决方案2】：

尝试添加-webkit-appearance: none; iOS 往往会弄乱表单。

【讨论】：

【解决方案3】：

因为你写错了
试试这个：

-webkit-box-shadow: 0 5px 1px rgba(224, 39, 14, 1);

你只需为它写 3 个尺寸

【讨论】：

【解决方案4】：

我已经尝试了互联网上列出的所有方法，以静态方式解决此问题。我唯一能做的就是使用 -webkit-box-shadow 样式，但是像这样添加#222：

-webkit-filter: drop-shadow(0.5px 1px 1px #222);

【讨论】：

这可行 - 但请注意，这会重置 css 堆叠的顺序。即 z-index 将停止正常工作。参考freecodecamp.org/news/…

【解决方案5】：

在我的情况下，我修复了添加所有这些规则：

-webkit-appearance: none;
border:0;
border-radius: 1px;
height: 1px;

特别是设置height。

【讨论】：