CSSで画像の影を設定する方法-CSSチュートリアル-php.cn

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

青灯夜游

リリース： 2021-11-11 16:14:26

オリジナル

18795 人が閲覧しました

設定方法: 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 属性は、要素 (通常は ) の視覚効果 (例: ぼかしや彩度) を定義します。

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