web-dev-qa-db-ja.com

四方すべてにボックスシャドウを適用する方法は？

box-shadowを4面すべてに適用しようとしています。私は2つの側面でしか手に入れることができませんでした：

csscss3box-shadow
67
dragonfly

これは、xとyのオフセットのためです。これを試して：

-webkit-box-shadow: 0 0 10px #fff;
        box-shadow: 0 0 10px #fff;

編集（1年後）：コメントで要求されたように、答えをよりクロスブラウザにしました:)

btw：最近では多くのcss3ジェネレーターがあります。 css3.me 、 css3maker 、 css3generator など...

107
Damb

参照： http://jsfiddle.net/thirtydot/cMNX2/8/

input {
    -webkit-box-shadow: 0 0 5px 2px #fff;
    -moz-box-shadow: 0 0 5px 2px #fff;
    box-shadow: 0 0 5px 2px #fff;
}
34
thirtydot

これはかっこいいですね。

-moz-box-shadow: 0 0 5px #999;
-webkit-box-shadow: 0 0 5px #999;
box-shadow: 0 0 5px #999;
10
Nalan Madheswaran

このコードのように簡単です：

box-shadow: 0px 0px 2px 2px black; /*any color you want*/
6
Pankskie

最も簡単な解決策で最も簡単な方法は、4面すべてに影を追加することです。 CSS

box-shadow: 0 0 2px 2px #ccc; /* with blur shadow*/
box-shadow: 0 0 0 2px #ccc; /* without blur shadow*/
3
Huzaif Sayyed

http://css-tricks.com/forums/topic/how-to-add-shadows-on-all-4-sides-of-a-block-with-css/ を見つけましたサイト。

.allSides
{
    width:350px;height:200px;
    border: solid 1px #555;
    background-color: #eed;
    box-shadow: 0 0 10px rgba(0,0,0,0.6);
    -moz-box-shadow: 0 0 10px rgba(0,0,0,0.6);
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.6);
    -o-box-shadow: 0 0 10px rgba(0,0,0,0.6);
}
2
user3619130

次のリンクでさまざまな組み合わせを使用できます。
https://www.cssmatic.com/box-shadow

必要な結果は、次のCSSによって達成できます。

-webkit-box-shadow: 0px 0px 11px 1px rgba(0,0,0,1);
-moz-box-shadow: 0px 0px 11px 1px rgba(0,0,0,1);
box-shadow: 0px 0px 11px 1px rgba(0,0,0,1);
0
Ans

次のcssコードを4辺すべてに使用します。box-shadow：0px 1px 7px 0px rgb（106、111、109）;

0
Bal mukund kumar