9

div にボックス シャドウを追加しようとしていますが、影を div の左、右、および下にのみ表示したいのですが、div から上部の影のみを削除する方法を知っているか、教えてもらえますか?

-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
 -khtml-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
   -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
        box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
4

6 に答える 6

9

基本的なボックス シャドウの値は次のとおりです。

box-shadow: [horizontal-offset] [vertical-offset] [blur](optional) [spread](optional) [color]

たとえば、次のようになります。

box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);

オフセットのない単なる影になります

box-shadow: 0px 5px 8px rgba(0, 0, 0, 0.3);

次のように、5px の垂直オフセットを持つ影になり、効果的に影を押し下げます。

http://jsfiddle.net/TLQs9/

于 2013-10-17T14:03:34.337 に答える
2

これを試して：

div{
box-shadow:12px 10px 4px rgba(0, 0, 0, 0.3);
-webkit-box-shadow:12px 10px 4px rgba(0, 0, 0, 0.3);
-moz-box-shadow:12px 10px 4px rgba(0, 0, 0, 0.3);
}

これを使用すると、上部を除くすべての面に影ができます。値を変更できますが、引き続き機能します。4 番目の値を追加しないでください。問題ありません。

于 2013-10-17T14:33:28.873 に答える
0

これを試して ： 

  div
    {
      box-shadow: 0px 9px 29px rgb(102, 102, 102);
      -webkit-box-shadow: 0px 9px 29px rgb(102, 102, 102);
      -moz-box-shadow:0px 9px 29px rgb(102, 102, 102);
    }

jsfiddleで見る

もっと見る 1

もっと見る 2

于 2013-10-17T14:13:32.227 に答える
0

上記の答えはどれもうまくいきませんでした。そのため、代替ソリューションとしてパッチを使用しました。ボックスの影がある要素/div の内側。2 番目の div を配置し、幅 100% で背景をメインの div と同じ色にし、ボックスの影を覆うように配置します。

background-color: your background color?
width:100%;
position:absolute;
height 15px;
left 0; 
top -10px;

ボックスの影にパッチを適用するには、高さを微調整する必要がある場合があります。しかし、それは機能します。さらに、このトリックはどの側にも使用できます。

于 2015-06-13T18:26:43.633 に答える