css - 四辺すべてに CSS のボックスシャドウ

Question

ここにこのクラスがあり、正常に動作するボックスシャドウを使用していますが、2 つの側面にしか影が表示されません。4 つの側面すべてに影を付ける方法はありますか?

ありがとう、J

.contactBackground{
    background-color:#FFF;
    padding:20px;
    box-shadow: 10px 10px 10px #000000;
}

score 14 · Accepted Answer

オフセットをゼロに設定すると、影は 4 つの側面すべてで等しくなります。

.contactBackground{
    background-color:#FFF;
    padding:20px;
    box-shadow: 0 0 10px #000000;
}

score 9 · Accepted Answer

ボックスシャドウ

CSS3 box-shadow プロパティには次の属性があります: ( W3Schools )

box-shadow: h-shadow v-shadow blur spread color inset;

あなたの例では、シャドウを垂直方向と水平方向に 10px オフセットしています。

他のコメントと同様に、最初の 2 つの値を 0px に設定して、すべての面に均一な影を付けます。

最新のブラウザーをサポートするためのシャドウの主なプレフィックスはbox-shadow.

古い Mozilla と Webkit で使用することをお勧めするものが他に 2 つあります。

また、rgba16 進数の色値の代わりに使用することで、影のアルファ/不透明度を設定できます。 box-shadow: 0px 0px 20px 10px rgba(0, 0, 0, 0.3);

score 2 · Accepted Answer

オフセット定義を削除し、ぼかし半径 (3 番目の引数) のみを使用します。

.contactBackground{
    background-color: #fff;
    padding: 20px;
    box-shadow: 0 0 10px #000;
}

score 1 · Accepted Answer

1

試してみてください: box-shadow: 0 0 10px 10px #000000;

于 2012-10-10T18:42:09.193 に答える

score -1 · Accepted Answer

box-shadow: 10px 10px 10px 10px BLACK を指定する必要があります。

右、下、左、上

または、box-shadow-top: 10px BLACK; と言うことができます。等