36

CSS3を使用してbox-shadowいるときに、通常は発生しない問題が発生しています。

ボックスシャドウは通常、divエッジ上でブリードするだけですが、これではブリードしません。

box-shadowそれは上部と右側で切り取られています。

これが私がbox-shadowに使用しているcssです：

-moz-box-shadow: 0 0 5px #555;
-webkit-box-shadow: 0 0 5px #555;
 box-shadow: 0 0 5px #555;

乾杯

4

6 に答える 6

50

問題は、中央のメインdivが影の端から切り取られていることです。これに設定overflow:visibleすると、表示されるはずです。

于 2012-10-03T17:16:50.897 に答える
32

box-shadowがカットオフされている場合はoverflow:visible、要素が含まれているすべてのdivに設定されていることを確認してください。

于 2012-10-03T17:22:36.003 に答える
10

次のようにパディング+負のマージンを使用します。

.img {
  padding: 10px;
  margin: -10px;
}
于 2019-06-13T11:26:11.323 に答える
4

私はIEでこの問題に何度も遭遇しました、そして私が見つけた最良の解決策はdivの周りに透明なアウトラインを使用することです。これにより、GeckoやWebkitがクリップしない場合でも、IEがボックスシャドウをクリップするのを防ぐことができます。この問題を修正するためにアウトラインを使用することの素晴らしい点の1つは、divの位置に影響を与えないことです。

たとえば、position：absoluteとbottom：-30pxを使用して、親divに対して特定の場所に配置するdivがありました。IE、そしてIEだけが、ボックスの影の上下を切り落としていました。このアウトラインを追加すると、位置を変更せずに修正されました。

outline: 10px solid transparent;
于 2014-09-24T04:57:38.543 に答える
0

このスタイルのimgタグをshowshadow-boxに正しく設定できます

.img{
  margin:20px;
 -moz-box-shadow: 0 0 5px #555;
  -webkit-box-shadow: 0 0 5px #555;
  box-shadow: 0 0 5px #555;
 }
于 2012-10-03T17:26:01.587 に答える
0

あなたが使用することができます

.img{
    filter: drop-shadow(0 0 5px #555);
}

代わりは

于 2020-03-02T16:46:00.777 に答える