Inset Box-Shadow と画像: 回避策
画像を含むコンテナで inset Box-Shadow を使用すると、影が表示されなくなることがよくあります画像。この制限を克服するには、独自の CSS ソリューションに頼ることができます。
:after 疑似要素を使用することで、2 番目の影を運ぶレイヤーを作成できます。この手法を示すサンプル コードは次のとおりです。
CSS:
main::after { box-shadow: inset 3px 3px 10px 0 #000000; content: ''; display: block; height: 100%; position: absolute; top: 0; width: 100%; }
HTML:
<main> <img src="https://upload.wikimedia.org/wikipedia/commons/d/d2/Solid_white.png"> </main>
このメソッドでは、マークアップに追加の要素が必要なくなり、クリーンで CSS ベースのアプローチ。 :after 要素は、画像をオーバーレイする「シャドウ コンテナ」として機能し、挿入ボックスシャドウをその上に拡張できるようにします。
以上がCSS を使用して画像にインセット ボックス シャドウを適用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。