Question

Chrome版本：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;

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

1 个答案: