CSS3 属性を使用して画像スタイル (角丸、影、グラデーション) を豊かにする方法

CSS3 では、box-shadow と border-radius が画像に直接使用されている場合、ブラウザーはそれらを適切にレンダリングできません。ただし、画像を背景画像として使用すると、追加されたスタイルブラウザで適切にレンダリングできます。 box-shadow、border-radius、transition を使ってさまざまな画像スタイルの効果を作成する方法を紹介します。
問題
デモを見ると、画像の最初の行に border-radius と inline box-shadow を設定していることがわかります。 Firefox は画像の境界半径をレンダリングしますが、インラインボックスシャドウはレンダリングしません。どちらの効果も Chrome と Safari ではレンダリングされません。

コードをコピーします

コードは次のとおりです:

.normal img {
ボーダー: ソリッド 5px #000;
-webkit-border-radius: 20px;
-webkit-box-shadow : インセット 0 1px 5px rgba(0,0,0,.5);
-moz-box-shadow: インセット 0 1px 5px rgba(0,0,0,.5); inset 0 1px 5px rgba(0,0,0,.5);

Firefox エフェクト
:

クローム/サファリ

回避策

border-radius と inline box-shadow が適切に機能するには、画像を背景画像に変換する必要があります。

動的メソッド

この作業を動的に完了するには、jquery を使用して背景画像ラッパーを各画像に追加する必要があります。次の JS コードは、span パッケージを各画像に追加します。span の背景画像のパスは画像のパスです。
コードは比較的単純なので説明する必要はないと思います。よくわからない場合は、jquery API を直接確認してください。

コードをコピー

コードは次のとおりです:

人気のチュートリアル

詳細>