CSS の画像に対してインセット ボックスのシャドウが機能しないのはなぜですか?

画像でインセット ボックスのシャドウが機能しない: CSS ソリューション

CSS では、box-shadow プロパティによって要素の周囲にシャドウが作成されます。要素の境界の外側に拡張します。ただし、画像に適用すると、この影が画像上に広がっていないように見えることがよくあります。

この問題を解決するには、:after 疑似要素を利用できます。これにより、親コンテナ内に追加の要素を作成し、画像に直接ではなく、その要素にシャドウを適用できるようになります。

例を次に示します:

main {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 90%;
  height: 90%;
  background-color: #FFFFFF;
  box-shadow: outset 3px 3px 10px 0 #000000;
}

main::after {
  box-shadow: inset 3px 3px 10px 0 #000000;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  top: 0;
  width: 100%;
}

これを追加すると、 : main 要素への宣言の後、画像の上に非表示の透明なレイヤーを作成します。次に、シャドウがこのレイヤーに適用され、必要に応じて画像上にシャドウを拡張できるようになります。

以上がCSS の画像に対してインセット ボックスのシャドウが機能しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。