ホームページ > 記事 > ウェブフロントエンド > CSSで画像の影を設定する方法
CSSで画像の影を設定する方法
- 青灯夜游オリジナル
- 2021-11-10 16:41:3218684ブラウズ
設定方法: 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 ブラー スプレッド カラー インセット;
- #h-shadow 必須。水平方向の影の位置。負の値も許可されます。
- v-shadow 必須。垂直影の位置。負の値も許可されます。
- ぼかし オプション。曖昧な距離。
- スプレッド オプション。影のサイズ。
- 色 オプション。影の色。 CSS カラー値を参照してください。
- インセット オプション。外側のシャドウ（アウトセット）を内側のシャドウに変更します。 #例:
<!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 属性は、要素 (通常は ) の視覚効果 (例: ぼかしや彩度) を定義します。
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 サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：CSSでhrの長さを設定する方法次の記事：CSSでhrの長さを設定する方法