1

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;

クロムには運がありません。

ご意見をお聞かせください

4

1 に答える 1

3

-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;

于 2013-03-15T10:34:40.930 に答える