html - 片側のボックスシャドウを端から端まで表示するにはどうすればよいですか？

Question

幅が100％box-shadowで、下部にのみ表示されるように定義されている要素の場合、要素の幅全体に沿ってシャドウが一貫して表示されるようにするにはどうすればよいですか？

現在、シャドウは左端と右端の両方でフェードアウトしています。影は真ん中とは著しく異なります。例：

<style>
body { padding: 0; margin: 0; }
h1 { margin: 0; box-shadow: 0 10px 10px #009;}
</style>

<h1>Bacon</h1>

score 3 · Accepted Answer

h1を含めるように変更することでこれを行いました

margin-left: -10px; margin-right: -10px; padding-left: 10px; padding-right: 10px;

負のマージンは、影を十分に広げて、全体が同じように見えるようにします。これは少し粗雑でハックですが、機能します。

score 3 · Accepted Answer

拡散距離を追加して、ぼかし値に対抗します。10px のぼかしには、5px の広がりが必要です (各方向に 5px = 10px)。例:

 h1 { margin: 0; box-shadow: 0 5px 10px 5px #009;}

score 0 · Accepted Answer

0

これを試して： h1 { margin: 0; box-shadow: 0px 10px #009;}

于 2012-11-20T20:42:23.600 に答える

score 0 · Accepted Answer

0

これを試して：

h1 { margin: 0; box-shadow: 0 2px 10px 8px #009;}

于 2012-11-20T20:47:11.883 に答える

score 0 · Accepted Answer

エンドキャップに負の値を追加します。

box-shadow: -5px -5px 10px 10px #009;

5 に答える 5