google-chrome - 插入阴影声明不适用于最新的 Chrome？

Question

铬版本：25.0.1364.172

编码：

<div style="
  border: 2px solid black;
  width: 100px;
  height: 100px;
-webkit-box-shadow: inset 0px 5px 8px -10px red, inset 0px -5px 8px -10px red;
">
</div>

任何人都可以试一试吗？

使用此代码，我希望仅在 TOP 和 BOTTOM 上有嵌入的阴影。

没有骰子。

http://jsfiddle.net/ngZNv/

如果它对您也不起作用，您能否建议一种可能的替代方法？

这个声明似乎（或多或少）有效：

  -webkit-box-shadow: inset 0px 1px 0px red, inset 0px -1px 0px red;

但这是一个明显不同的解释。

总结一下：这适用于Mozilla（没有前缀）：

box-shadow: inset 0px 5px 8px -10px red, inset 0px -5px 8px -10px red; 

铬没有运气。

请指教

Answer 1

似乎 -10px 正在阻止显示阴影，该值正在改变阴影的传播，因此，它是负数没有多大意义。不确定你打算让它看起来像什么。10px但是，如果您将它们更改为而不是，它至少是可见的-10px。

<div style="
  border: 2px solid black;
  width: 100px;
  height: 100px;
-webkit-box-shadow: inset 0px 5px 8px 10px red, inset 0px -5px 8px 10px red;
">
</div>

用法如下：

box-shadow: [inset] <horizontal-offset> <vertical-offset> [blur] [spread] [color];

编辑：

这是否与您想要的效果相似？

-webkit-box-shadow: inset 0px 5px 10px -5px #F00, inset 0px -5px 10px -5px #F00;