ホームページ > 記事 > ウェブフロントエンド > CSSでdivシャドウを設定する方法

CSSでdivシャドウを設定する方法

青灯夜游オリジナル: 2021-05-12 13:47:0428680ブラウズ

CSS では、box-shadow 属性を使用して div シャドウを設定できます。「box-shadow: 水平方向のシャドウ値、垂直方向のシャドウ値、ぼかし距離、シャドウサイズ、シャドウカラーインセット;」スタイルを追加するだけです。 div 要素に追加します。つまり、「inset」値は省略可能で、内側のシャドウを設定します。

CSSでdivシャドウを設定する方法

このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。

css set divshadow

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style> 
div
{
	width:300px;
	height:100px;
	background-color:yellow;
	box-shadow: 10px 10px 5px #888888;
}
</style>
</head>
<body>

<div></div>

</body>
</html>

レンダリング:

CSSでdivシャドウを設定する方法

#説明:

box-shadow プロパティでは、1 つ以上のドロップダウンシャドウボックスを設定できます。

構文

box-shadow: h-shadow v-shadow blur spread color inset;

注: boxShadow プロパティは、ボックスに 1 つ以上のドロップダウンシャドウを追加します。このプロパティは、シェードのコンマ区切りのリストで、各シェードは 2 ～ 4 個の長さの値、オプションのカラー値、およびオプションの inset キーワードによって指定されます。省略された長さの値は 0 です。

#値##h-shadowv-shadow#ぼかし#オプション。ファジー距離オプション。影のサイズはオプションです。影の色。学習ビデオ共有:

説明
必須。水平方向の影の位置。負の値も許可されます
必須。垂直影の位置。負の値が許可されます
	#スプレッド
	#color
#インセット	オプション。シャドウを外側のシャドウから内側のシャドウに変更します（最初）
	css ビデオチュートリアル

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

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：CSSのパフォーマンスを向上させる方法次の記事：CSSのパフォーマンスを向上させる方法

続きを見る