CSS3では、画像上でBox-ShadowとBorder-Radiusを直接使用して、ブラウザはうまくレンダリングできません。ただし、画像をバックグラウンドイメージとして使用すると、追加のスタイルブラウザが適切にレンダリングできます。 Box-Shadow、Border-Radius、Transitionを使用して、さまざまな画像スタイル効果を作成する方法を説明します。
質問デモを見ると、画像の最初の行にボーダーラジウスと埋め込まれたボックスシャドウを設定することに気付きました。 Firefoxは画像のボーダーラジウスをレンダリングしますが、埋め込まれたボックスシャドウをレンダリングしません。クロムもサファリの効果もレンダリングされません。
.NORMAL IMG {
国境：ソリッド5px＃000;
-webkit-border-radius：20px;
-moz-border-radius：20px;
ボーダーラジウス：20px;
-webkit-box-shadow：inset 0 1px 5px rgba（0,0,0、.5）;
-moz-box-shadow：Inset 0 1px 5px RGBA（0,0,0、.5）;
Box-Shadow：Inset 0 1PX 5PX RGBA（0,0,0、.5）;
}
Firefox効果：クロム/サファリ
回避策ボーダーラジウスと埋め込まれたボックスシャドウが適切に機能するためには、画像を背景イメージに変換する必要があります。
動的方法この作業を動的に行うには、jQueryを使用して背景画像を追加して各画像をラップする必要があります。次のJSコードは、各画像にスパンラッパーを追加し、スパンの背景画像パスは画像パスです。
コードは比較的簡単ですが、説明する必要はないと思います。わからない場合は、jQuery APIを直接確認できます。
<script type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"> </script>
<script type = "text/javascript">
$（document）.ready（function（）{
$（ "img"）。load（function（）{
$（this）.wrap（function（）{
return '<span style = "position：relative; display：inline-block; backgracud：url（' + $（this）.attr（ 'src'） + '）width：' + $（this）.width（）.width（）.width（）px; height： ' + $（this）.height（） +' px;" /> ';
}）;
$（this）.css（ "Opacity"、 "0"）;
}）;
}）;
</script>
出力
上記のコードでは、次の結果が出力されます。
<span style = "position：relative; display：inline-block; background：url（image.jpg）no-repeat center; width：150px; height：150px;">
<img src = "image.jpg" style = "Opacity：0;">
</span>
円形の画像追加するボーダーラジウスを使用して、円形の写真の効果を実現します。効果は次のとおりです。
CSS：
.circle .image-wrap {
-webkit-border-radius：50em;
-moz-border-radius：50em;
ボーダーラジウス：50EM;
}
カードスタイル以下は、複数の埋め込みボックスシャドウを使用したカードスタイルの画像です。
CSS：
.card .image-wrap {
-webkit-box-shadow：Inset 0 0 1px RGBA（0,0,0、.8）、Inset 0 2PX 0 RGBA（255,255,255、.5）、Inset 0 -1PX 0 RGBA（0,0,0、.4）;
-moz-box-shadow：inset 0 0 1px rgba（0,0,0、.8）、Inset 0 2px 0 rgba（255,255,255、.5）、set 0 -1px 0 rgba（0,0,0、.4）;
Box -Shadow：Inset 0 0 1PX RGBA（0,0,0、.8）、Inset 0 2PX 0 RGBA（255,255,255、.5）、Inset 0 -1PX 0 RGBA（0,0,0、.4）;
-webkit-border-radius：20px;
-moz-border-radius：20px;
ボーダーラジウス：20px;
}
リリーフスタイル以下はリリーフ効果です。
CSS：
.embossed .image-wrap {
-webkit -box -shadow：Inset 0 0 2px RGBA（0,0,0、.8）、Inset 0 2PX 0 RGBA（255,255,255、.5）、Inset 0 -7PX 0 RGBA（0,0,0、.6）、Inset 0 -9PX 0 RGBA（255,25,255、1.3）;
-moz -box -shadow：Inset 0 0 2px RGBA（0,0,0、.8）、Inset 0 2px 0 RGBA（255,255,255、.5）、Inset 0 -7PX 0 RGBA（0,0,0、.6）、Inset 0 -9PX 0 RGBA（255,25,255、.3）;
Box -shadow：Inset 0 0 2px RGBA（0,0,0、.8）、Inset 0 2PX 0 RGBA（255,255,255、.5）、Inset 0 -7PX 0 RGBA（0,0,0、.6）、Inset 0 -9PX 0 RGBA（255,255,255、.3）;
-webkit-border-radius：20px;
-moz-border-radius：20px;
ボーダーラジウス：20px;
}
柔軟なリリーフスタイルエンボススタイルと比較して、新しいスタイルは1PXブラー属性を追加します。
CSS：
.soft-embossed .image-wrap {
-WebKit -Box -Shadow：Inset 0 0 4PX RGBA（0,0,0,1）、Inset 0 2PX 1PX RGBA（255,255,255、.5）、INSET 0 -9PX 2PX RGBA（0,0,0、.6）、INSET 0 -12PX 2PX RGBA（255,2555、255、255、255、255,255,255,2555555555
-moz -box -shadow：Inset 0 0 4px RGBA（0,0,0,1）、Inset 0 2px 1px RGBA（255,255,255、.5）、INSET 0 -9PX 2PX RGBA（0,0,0、.6）、INSET 0 -12PX 2PX RGBA（255,25,255、;
Box -shadow：Inset 0 0 4PX RGBA（0,0,0,1）、Inset 0 2PX 1PX RGBA（255,255,255、.5）、Inset 0 -9PX 2PX RGBA（0,0,0、.6）、Inset 0 -12PX 2PX RGBA（255,25,255、1.3）;
-webkit-border-radius：20px;
-moz-border-radius：20px;
ボーダーラジウス：20px;
}
カットアウトスタイル埋め込まれたボックスシャドウを使用して、カットアウト効果を実現します。
CSS：
.cut-out .image-wrap {
-webkit-box-shadow：0 1px 0 rgba（255,255,255、.2）、Inset 0 4px 5px RGBA（0,0,0、.6）、Inset 0 1PX 0 RGBA（0,0,0、.6）;
-moz-box-shadow：0 1px 0 rgba（255,255,255、.2）、Inset 0 4px 5px RGBA（0,0,0、.6）、Inset 0 1PX 0 RGBA（0,0,0、.6）;
Box-Shadow：0 1PX 0 RGBA（255,255,255、.2）、Inset 0 4PX 5PX RGBA（0,0,0、.6）、Inset 0 1PX 0 RGBA（0,0,0、.6）;
-webkit-border-radius：20px;
-moz-border-radius：20px;
ボーダーラジウス：20px;
}
変形と輝きこの例では、遷移属性を画像パッケージに追加します。マウスが通過すると、丸い角から丸い形に変わります。次に、複数のボックスシャドウを使用して、明るい効果を実現します。
CSS：
.Morphing-Glowing .image-wrap {
-webkit-transition：1s;
-moz-transition：1s;
遷移：1秒;
-webkit-border-radius：20px;
-moz-border-radius：20px;
ボーダーラジウス：20px;
}
.Morphing-Glowing .image-wrap：Hover {
-webkit-box-shadow：0 0 20px RGBA（255,255,255、.6）、Inset 0 0 20px RGBA（255,255,255,1）;
-moz-box-shadow：0 0 20px RGBA（255,255,255、.6）、Inset 0 0 20px RGBA（255,255,255,1）;
Box-Shadow：0 0 20px RGBA（255,255,255、.6）、Inset 0 0 20px RGBA（255,255,255,1）;
-webkit-border-radius：60em;
-moz-border-radius：60em;
ボーダーラジウス：60EM;
}
ハイライト効果ハイライト効果は、擬似クラスの後に要素に追加することによって達成されます。
CSS：
.glossy .image-wrap {
-webkit-box-shadow：inset 0 -1px 0 rgba（0,0,0、.5）;
-moz-box-shadow：inset 0 -1px 0 rgba（0,0,0、.5）;
Box -Shadow：Inset 0 -1PX 0 RGBA（0,0,0、.5）;
-webkit-border-radius：20px;
-moz-border-radius：20px;
ボーダーラジウス：20px;
}
.glossy .image-wrap：後{
位置：絶対;
コンテンツ： ' ';
幅：100％;
高さ：50％;
上：0;
左：0;
-webkit-border-radius：20px;
-moz-border-radius：20px;
ボーダーラジウス：20px;
背景：-moz-linear-gradient（top、rgba（255,255,255,0.7）0％、rgba（255,255,255、.1）100％）;
背景：-webkit-gradient（線形、左上、左下、カラーストップ（0％、RGBA（255,255,255,0.7））、カラーストップ（100％、RGBA（255,255,255、.1）））;
背景：線形勾配（TOP、RGBA（255,255,255,0.7）0％、RGBA（255,255,255、.1）100％）;
}
反射効果この例では、ハイライトを下部に移動して反射効果を実現します。
CSS：
.reflection .image-wrap：後{
位置：絶対;
コンテンツ： ' ';
幅：100％;
高さ：30px;
下：-31px;
左：0;
-webkit-border-top-left-radius：20px;
-webkit-border-top-right-radius：20px;
-Moz-Border-Radius-Topleft：20px;
-moz-border-radius-topright：20px;
Border-Top-Left-Radius：20px;
Border-Top-Right-Radius：20px;
背景：-moz-linear-gradient（top、rgba（0,0,0、.3）0％、rgba（255,255,255,0）100％）;
背景：-webkit-gradient（線形、左上、左下、カラーストップ（0％、RGBA（0,0,0、.3））、カラーストップ（100％、RGBA（255,255,255,0）））;
背景：線形勾配（TOP、RGBA（0,0,0、.3）0％、RGBA（255,255,255,0）100％）;
}
.reflection .image-wrap：Hover {
位置：相対;
上：-8px;
}
ハイライトと反射この例では、以下を使用します。
CSS：
。グロッシー - 反射。image-wrap {
-webkit-box-shadow：Inset 0 -1px 0 RGBA（0,0,0、.5）、Inset 0 1PX 0 RGBA（255,255,255、.6）;
-moz-box-shadow：Inset 0 -1px 0 RGBA（0,0,0、.5）、Inset 0 1PX 0 RGBA（255,255,255、.6）;
Box -Shadow：Inset 0 -1PX 0 RGBA（0,0,0、.5）、Inset 0 1PX 0 RGBA（255,255,255、.6）;
-webkit-transition：1s;
-moz-transition：1s;
遷移：1秒;
-webkit-border-radius：20px;
-moz-border-radius：20px;
ボーダーラジウス：20px;
}
。グロッシー - 反省.image-wrap：before {
位置：絶対;
コンテンツ： ' ';
幅：100％;
高さ：50％;
上：0;
左：0;
-webkit-border-radius：20px;
-moz-border-radius：20px;
ボーダーラジウス：20px;
背景：-moz-linear-gradient（top、rgba（255,255,255,0.7）0％、rgba（255,255,255、.1）100％）;
背景：-webkit-gradient（線形、左上、左下、カラーストップ（0％、RGBA（255,255,255,0.7））、カラーストップ（100％、RGBA（255,255,255、.1）））;
背景：線形勾配（TOP、RGBA（255,255,255,0.7）0％、RGBA（255,255,255、.1）100％）;
}
。グロッシー - 反射.image-wrap：after {
位置：絶対;
コンテンツ： ' ';
幅：100％;
高さ：30px;
下：-31px;
左：0;
-webkit-border-top-left-radius：20px;
-webkit-border-top-right-radius：20px;
-Moz-Border-Radius-Topleft：20px;
-moz-border-radius-topright：20px;
Border-Top-Left-Radius：20px;
Border-Top-Right-Radius：20px;
背景：-moz-linear-gradient（top、rgba（230,230,230、.3）0％、rgba（230,230,230,0）100％）;
背景：-webkit-gradient（線形、左上、左下、カラーストップ（0％、RGBA（230,230,230、.3））、カラーストップ（100％、RGBA（230,230,230,0,0,0,0）））;
背景：線形勾配（TOP、RGBA（230,230,230、.3）0％、RGBA（230,230,230,0）100％）;
}
テープスタイルこの例では、テープの効果を実現するために次のように使用します。
CSS：
.tape .image-wrap {
-webkit-box-shadow：Inset 0 0 2px RGBA（0,0,0、.7）、Inset 0 2PX 0 RGBA（255,255,255、.3）、Inset 0 -1PX 0 RGBA（0,0,0、.5）、0 1PX 3PX RGBA（0,0,0、.4）;
-moz-box-shadow：Inset 0 0 2px RGBA（0,0,0、.7）、Inset 0 2px 0 RGBA（255,255,255、.3）、Inset 0 -1PX 0 RGBA（0,0,0、.5）、0 1PX 3PX RGBA（0,0,0、.4）;
Box -Shadow：Inset 0 0 2PX RGBA（0,0,0、.7）、Inset 0 2PX 0 RGBA（255,255,255、.3）、Inset 0 -1PX 0 RGBA（0,0,0、.5）、0 1PX 3PX RGBA（0,0,0、.4）;
}
.tape .image-wrap：後{
位置：絶対;
コンテンツ： ' ';
幅：60px;
高さ：25px;
トップ：-10px;
左：50％;
マージン左：-30px;
境界線：ソリッド1px RGBA（137,130,48、.2）;
背景：-moz-linear-gradient（top、rgba（254,243,127、.6）0％、rgba（240,224,54、.6）100％）;
背景：-webkit-gradient（線形、左上、左下、カラーストップ（0％、RGBA（254,243,127、.6））、カラーストップ（100％、RGBA（240,224,54、.6）））;
背景：線形勾配（TOP、RGBA（254,243,127、.6）0％、RGBA（240,224,54、.6）100％）;
-webkit-box-shadow：inset 0 1px 0 rgba（255,255,255、.3）、0 1px 0 rgba（0,0,0、.2）;
}
変形と着色この例では、マウスが通過したときに放射状勾配の効果を実現するために、要素上で次のものを使用します。
CSS：
.morphing-tinting .image-wrap {
位置：相対;
-webkit-transition：1s;
-moz-transition：1s;
遷移：1秒;
-webkit-border-radius：20px;
-moz-border-radius：20px;
ボーダーラジウス：20px;
}
.morphing-tinting .image-wrap：hover {
-webkit-border-radius：30em;
-moz-border-radius：30em;
ボーダーラジウス：30EM;
}
.morphing-tinting .image-wrap：後{
位置：絶対;
コンテンツ： ' ';
幅：100％;
高さ：100％;
上：0;
左：0;
-webkit-transition：1s;
-moz-transition：1s;
遷移：1秒;
-webkit-border-radius：30em;
-moz-border-radius：30em;
ボーダーラジウス：30EM;
}
.morphing-tinting .image-wrap：hover：after {
背景：-webkit -gradient（radial、50％50％、40、50％50％、80、from（rgba（0,0,0,0））、（rgba（0,0,0,1）））;
背景：-moz-radial-gradient（50％50％、Circle、RGBA（0,0,0,0）40px、RGBA（0,0,0,1）80px）;
}
羽毛のエッジラウンドまた、放射状勾配を使用してマスクを生成して羽毛効果を達成することもできます。
CSS：
.feather .image-wrap {
位置：相対;
-webkit-border-radius：30em;
-moz-border-radius：30em;
ボーダーラジウス：30EM;
}
.feather .image-wrap：後{
位置：絶対;
コンテンツ： ' ';
幅：100％;
高さ：100％;
上：0;
左：0;
背景：-webkit -gradient（radial、50％50％、50、50％50％、70、（rgba（255,255,255,0））、（rgba（255,255,255,1）））まで）;
背景：-MOZ-Radial-Gradient（50％50％、Circle、RGBA（255,255,255,0）50px、RGBA（255,255,255,1）70px）;
}
ブラウザの互換性この実装は、Border-Radius、Box-Shadowなどをサポートするほとんどのブラウザでうまく機能します。新機能をサポートしていないブラウザでは、元の画像のみが表示されます。
独自の実装を作成します
：前と：擬似クラスの後、画像用の多くのスタイルを作成することができ、自分で新しいエフェクトを作成することができます。