我遇到WebKit浏览器(Chrome 15.0.x和Safari 5.1.1)的问题，其中盒子阴影没有在文本输入上呈现。只是偶然地，我发现明确设置边框导致框阴影渲染，即使您将边框设置为“无”或默认，“插入”。下面的代码(在
JSFiddle上查看它)在Chrome或Safari浏览时显示了问题，但是如Firefox 6.0.2和Opera 11.52所示。
HTML
<input type="text" value="Works" style="border:none;" /> <input type="text" value="Works" style="border:inset;" /> <input type="text" value="Doesn't" />
CSS
input[type="text"] {
margin: 1em;
-webkit-Box-shadow: 0px 0px 2px 1px green;
Box-shadow: 0px 0px 2px 1px green;
}
我在WebKit中缺少使用盒子阴影的一些细节，还是发现了一个错误？
解决方法
默认情况下，WebKit中的输入具有应用于此的属性：
-webkit-appearance: textfield;
如果您希望文本字段的外观与平台相关，则这是您想要的。有时您可以使用这个仍然设置的样式，但其他时候，它需要设置为none，这使得它应用于标准CSS并且更少依赖于操作系统。似乎边框自动触发这个，但是Box-shadow没有，但是 – -vbkit-appearance是none，只适用于Box-shadow。 (如果应用了Box-shadow并且如果启用平台相关的外观，则不会渲染Box-shadow，则平台相关的外观不会关闭这一事实可能是一个错误)
要解决这个问题，只需明确地告诉它不要使用依赖于平台的外观：
input[type="text"] {
-webkit-appearance: none;
}
Test it with -webkit-appearance：none;添加。
这样做的缺点就是你失去了(一些)平台的本地外观，但是如果你试图使用盒子阴影，那么你可能试图将原生的外观风格化。
