CSSで画像の影を設定する方法

青灯夜游
リリース: 2021-11-11 16:14:26
オリジナル
18751 人が閲覧しました

設定方法: 1.「box-shadow:水平シャドウ垂直シャドウブラー拡散カラーinset;」ステートメントを使用; 2.「filter:drop-shadow(水平シャドウ垂直シャドウブラー拡散カラー)」を使用声明。

CSSで画像の影を設定する方法

このチュートリアルの動作環境: 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>
ログイン後にコピー

CSSで画像の影を設定する方法

2. filter:drop-shadow()

# を使用します。 ##filter 属性は、要素 (通常は CSSで画像の影を設定する方法) の視覚効果 (例: ぼかしや彩度) を定義します。

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 ビデオ チュートリアル

)

以上がCSSで画像の影を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!