設定方法: 1.「box-shadow:水平シャドウ垂直シャドウブラー拡散カラーinset;」ステートメントを使用; 2.「filter:drop-shadow(水平シャドウ垂直シャドウブラー拡散カラー)」を使用声明。
このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。
CSS で画像の影を設定するには 2 つの方法があります:
box-shadow 属性
filter: drop-shadow( )
ご紹介しましょう
1. box-shadow 属性を使用します
box-ボックスに追加するshadow属性 1つ以上の影。
構文: box-shadow: h-shadow v-shadow ブラー スプレッド カラー インセット;
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style> img { box-shadow: 10px 10px 10px rgba(0, 0, 0, .5); /*考虑浏览器兼容性*/ -moz-box-shadow: 10px 10px 10px rgba(0, 0, 0, .5); -webkit-box-shadow: 10px 10px 10px rgba(0, 0, 0, .5); } </style> </head> <body> <img src="img/1.jpg" style="max-width:90%" / alt="CSSで画像の影を設定する方法" > </body> </html>
# を使用します。 ##filter 属性は、要素 (通常は ) の視覚効果 (例: ぼかしや彩度) を定義します。
drop-shadow() は画像に影の効果を設定できます。シャドウは画像の下に合成され、特定の色でペイントできるマットのぼかしたオフセット バージョンにすることができます。 構文:filter:drop-shadow(h-shadow v-shadow ブラー スプレッド カラー);
例:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style> img { -webkit-filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, .5)); /*考虑浏览器兼容性:兼容 Chrome, Safari, Opera */ filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, .5)); } </style> </head> <body> <img src="img/1.jpg" style="max-width:90%" / alt="CSSで画像の影を設定する方法" > </body> </html>
(学習ビデオ共有: css ビデオ チュートリアル
)以上がCSSで画像の影を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。