0

以下は、テーブルにシャドウをドロップしようとしているjsfiddleです。問題は、影がテーブルの下部と右側にドロップされているが、テーブルの左側と上部にはドロップされていないことです。テーブルのすべての側面に影がドロップされるように、フィドルの css を変更する方法を教えてください。ありがとう、

http://jsfiddle.net/7RQtq/

.shadow {
    -moz-box-shadow: 3px 3px 4px #000;
    -webkit-box-shadow: 3px 3px 4px #000;
    box-shadow: 3px 3px 4px #000;
    /* For IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
    /* For IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}
4

3 に答える 3

3

x、y 座標をリセットします。

-moz-box-shadow: 0px 0px 4px #000;
-webkit-box-shadow: 0px 0px 4px #000;
box-shadow: 0px 0px 4px #000;
border-radius: 5px;

説明

最初のオプションはx座標で、2 番目のオプションは ですy。したがって、両方を にリセットする0pxと、中央に配置されます。そして、3 番目の値であるスプレッドを大きくすると、Photoshop のようになります。また、いくつかを与えると、border-radiusあなたが望む方法が正確に示されます。

スクリーンショット

フィドル: http://jsfiddle.net/7RQtq/4/

于 2012-12-29T18:02:16.387 に答える
1

従来の IE フィルターについてはわかりませんが、他のブラウザーの場合はbox-shadow: 0 0 16px #000;. 最初の 2 つの値はオフセットを示し、3 番目の値は影のぼかしを示します。

「box-shadow」プロパティは、1 つまたは複数のドロップ シャドウをボックスに添付します。プロパティは、影のコンマ区切りリストで、それぞれ 2 ～ 4 の長さの値、オプションの色、およびオプションの 'inset' キーワードで指定されます。省略された長さは 0 です。省略された色は UA が選択した色です。

どこ=はめ込み？&& [ {2,4} && ? ]

それぞれのコンポーネントは次のように解釈されます。

  1. 最初の長さは、影の水平方向のオフセットです。正の値を指定すると、ボックスの右側にオフセットされた影が描画され、左側に負の長さの影が描画されます。

  2. 2 番目の長さは垂直方向のオフセットです。正の値は影を下にオフセットし、負の値は上にオフセットします。

  3. 3 番目の長さはぼかし半径です。負の値は使用できません。ぼかし値が 0 の場合、影のエッジはシャープになります。それ以外の場合、値が大きいほど、影のエッジがぼやけます。下記参照。

  4. 4 番目の長さは広がり距離です。正の値を指定すると、影の形状は指定された半径だけ全方向に広がります。負の値を指定すると、影の形状が収縮します。下記参照。内側の影の場合、影を拡大する (より多くの影領域を作成する) ことは、影の周囲の形状を縮小することを意味することに注意してください。

色は影の色です。色が指定されていない場合、使用される色は「color」プロパティから取得されます。

ご想像のとおり、これらの値を組み合わせて、次のような複雑な (そして精巧な) 効果を作成できます。

于 2012-12-29T18:02:22.927 に答える
1

最初の 2 つのパラメーターは、x (右) と y (下) の変換です。影を中央に配置するには、それらを 0px に設定します。

http://jsfiddle.net/7RQtq/1/

-moz-box-shadow: 0px 0px 4px #000;
-webkit-box-shadow: 0px 0px 4px #000;
于 2012-12-29T18:03:39.400 に答える