css - Safari webkit 框阴影不起作用

Question

我正在编写一个响应式应用程序，所以我希望它能在所有浏览器上运行。我发现使用 box-shadow 在 safari 上不起作用，所以我使用了 -webkit-box-shadow

我试过这样使用它:

.adresseinput{

  height:50px;
  background-color: white;
  border-radius: 10px;
  border: 2px solid white;
  box-shadow: 0 0 0 3px red inset;
  -webkit-box-shadow: 0 0 0 3px red inset;
  outline: none;
}

但它根本不起作用，知道为什么吗？我该如何解决这个问题？

编辑:如果你想要更精确，我期待在 css 中做一些像法国城市面板这样的事情(一个带有红色内部边框的白色输入，不粘在输入的限制上)。对不起，如果我犯了一个英语错误

Answer 1

如果您阅读了列出的注释和已知问题 here您会看到 0px 像素模糊半径、一般模糊半径和 inset 在某些版本的 Safari 中存在问题。

Safari :

• 3.1
• 3.2
• 6

iOS

• 3.2
• 6

我会看看您是否可以通过在目标平台上分别针对 inset 和 blur-radius 进行测试来隔离问题。

还提到 iOS 8 有一个缩放相关的错误。