CSS盒子阴影在iPhone上无法使用

Question

з”ұдәҺжҹҗдәӣеҺҹеӣ пјҢжҲ‘еңЁ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输入框中，这会引起什么问题吗？我做错了什么？

在浏览器中一切正常...

- Romes

---

可能是重复的问题：iPhone iOS无法正确显示box-shadow。 - user

Answer 1

如果这是表单块，请添加

-webkit-appearance: none;

iPhones可能会使表单出现问题。请参见此处。

- Bjoern

---

解决了我的问题，移动版Safari中的阴影框未显示。 - Omar

链接答案中有一条重要的评论来自Johansrk: "记得将其放在box-shadow之前，而不是之后"。 - koubin

Answer 2

尝试添加-webkit-appearance: none;，因为iOS通常会搞乱表单。

- Chris Hawkes

Answer 3

因为你写错了
尝试这个：

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

你只需为它编写3种尺寸即可。

- Hamid Talebi

Answer 4

我已经尝试了互联网上列出的所有方法来静态修复这个问题。唯一能够起作用的是使用-webkit-box-shadow样式，并像这样添加#222：

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

- The ARCHIT3CT

---

这个可以工作 - 但请注意，这会重置CSS堆叠的顺序。即z-index将无法正常工作。请参考https://www.freecodecamp.org/news/4-reasons-your-z-index-isnt-working-and-how-to-fix-it-coder-coder-6bc05f103e6c/。 - Mingsheng

Answer 5

在我的情况下，我解决了这个问题，添加了所有这些规则：

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

特别是还要设置height。

- Diego D