106

box-shadow4面すべてにaを適用しようとしています。私は2つの側面でしかそれを得ることができませんでした:

4

13 に答える 13

174

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

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

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

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

于 2011-04-09T22:04:15.497 に答える
38

参照: 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;
}
于 2011-04-09T22:07:00.640 に答える
16

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

box-shadow: 0px 0px 2px 2px black; /*any color you want*/
于 2016-04-11T02:31:39.713 に答える
10

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

-moz-box-shadow: 0 0 5px #999;
-webkit-box-shadow: 0 0 5px #999;
box-shadow: 0 0 5px #999;
于 2013-03-12T23:39:42.300 に答える
8

box-shadow 構文を理解し、それに応じて記述します

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

h-offset: 影の水平オフセット。正の値はボックスの右側に影を置き、負の値はボックスの左側に影を置きます - 必須

v-offset: 影の垂直方向のオフセット。正の値は影をボックスの下に置き、負の値は影をボックスの上に置きます - 必須

blur: ぼかし半径 (数値が大きいほど、影がぼやけます) - オプション

color: 影の色 - オプション

スプレッド: スプレッド半径。正の値は影のサイズを大きくし、負の値は影のサイズを小さくします - オプション

インセット: 影を外側の影から内側の影に変更します - オプション

box-shadow: 0 0 10px #999;

box-shadow はスプレッドでより効果的に機能します

box-shadow: 0 0 10px 8px #999;

ボックスの内側に影を適用するには、「インセット」を使用します

box-shadow: 0 0 8px inset #999;
(or)
box-shadow: 0 0 8px 8px inset #999;

rgba (レッド グリーン ブルー アルファ) を使用して、シャドウをより効率的に調整します。

box-shadow: 0 0 8px inset rgba(153, 153, 153, 0.8); 
(or)
box-shadow: 0 0 8px 8px inset rgba(153, 153, 153, 0.8);
于 2020-01-03T05:32:40.463 に答える
5

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

box-shadow: 0 0 2px 2px #ccc; /* with blur shadow*/
box-shadow: 0 0 0 2px #ccc; /* without blur shadow*/
于 2018-12-05T18:41:45.760 に答える