ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSで画像に影効果を追加するにはどうすればよいですか?画像に影を追加する 2 つの方法 (コード例)
CSSで画像に影効果を追加するにはどうすればよいですか?画像に影を追加する 2 つの方法 (コード例)
- 青灯夜游オリジナル
- 2018-10-18 13:58:3052806ブラウズ
css では多くの画像効果を実現できますが、画像の影効果もその 1 つです。では、CSS で画像に影効果を追加するにはどうすればよいでしょうか。この記事では、CSS を使用して画像に影を追加する方法 (コード付き) を紹介し、CSS で画像に影を追加する 2 つの方法を説明します。困っている友人は参考にしていただければ幸いです。
最初に、CSS を使用して画像に影効果を追加する方法を見てみましょう最初の方法: box-shadow 属性の設定、box-shadow の実装を見てみましょう単純なコード例のメソッドを通じて属性を取得します。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css 图片阴影--box-shadow属性</title>
<style>
.demo{
width: 400px;
height: 300px;
margin: 50px auto;
}
.demo 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>
<div class="demo">
<img src="CSSで画像に影効果を追加するにはどうすればよいですか?画像に影を追加する 2 つの方法 (コード例)" / alt="CSSで画像に影効果を追加するにはどうすればよいですか?画像に影を追加する 2 つの方法 (コード例)" >
</div>
</body>
</html>レンダリング:
#box-shadow 属性で画像の影を設定するのは簡単ではありません。ボックスの設定方法を見てみましょう。 -shadow 属性:
box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow: 水平方向のシャドウの位置を定義する必須の値。負の値も許可されます。
v-shadow: 垂直方向の影の位置を定義する必須の値。負の値も許可されます。
blur: ぼかし距離を定義するオプションの設定値。
spread: 影のサイズを定義するオプションの設定値。
color: 影の色を定義するオプションの設定値。値が設定されていない場合、色の値はブラウザの表示に基づいて設定されることをお勧めします。
inset: オプション設定の値。設定後、外側のシャドウ (アウトセット) を内側のシャドウに変更できます。
次に、css を使用して画像に影効果を追加する方法を見てみましょう。2 番目の方法: css3 の filter 属性 -----filter 属性 を使用して、画像の影を設定します。画像。
filter:drop-shadow(); を設定して画像に影を追加できます。簡単なコード例で実装方法を見てみましょう。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css 图片阴影--box-shadow属性</title>
<style>
.demo{
width: 400px;
height: 300px;
margin: 50px auto;
}
.demo 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>
<div class="demo">
<img src="CSSで画像に影効果を追加するにはどうすればよいですか?画像に影を追加する 2 つの方法 (コード例)" / alt="CSSで画像に影効果を追加するにはどうすればよいですか?画像に影を追加する 2 つの方法 (コード例)" >
</div>
</body>
</html>レンダリング:
説明:
filter:drop-shadow(h-shadow v-shadow blur spread color);
h-shadow: 影の水平オフセットを負の値に設定します。 allowed 、負の値を指定すると、要素の左側に影が表示されます。
v-shadow: 影の垂直オフセットを設定します。負の値が許可され、負の値を指定すると要素の上に影が表示されます。
blur: 影のぼかしを設定します。値が大きいほど、影は大きくなり、明るくなります。設定しない場合、デフォルトは許可されません。 0 (影の境界が非常に鮮明です)。
spread: 影のサイズを設定します。正の値を指定すると影が拡大して大きくなり、負の値を指定すると影が縮小します。設定しない場合、デフォルトは 0 (影は要素と同じサイズになります)。
注: スプレッドは Webkit およびその他の一部のブラウザではサポートされていないため、追加してもレンダリングされません。
color: 影の色を設定します。設定されていない場合、色の値はブラウザに基づきます。色を設定することをお勧めします。
要約: 上記は、CSS を使用して画像に影を追加する 2 つの方法の完全な内容です。皆さんの学習に役立つことを願っています。関連チュートリアルの詳細については、 CSS3 ビデオ チュートリアル 、Html5 ビデオ チュートリアル 、bootstrap ビデオ チュートリアル をご覧ください。
以上がCSSで画像に影効果を追加するにはどうすればよいですか?画像に影を追加する 2 つの方法 (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。