HTML レイヤードボックスシャドウ効果のサンプルコード

ここに画像の説明を挿入

まず、画像を見てみましょう。今日はこのエフェクトを作成します。

ここに画像の説明を挿入

実は、何でもないんです。Web ページを作成するときに、ナビゲーションバーの作成でよく問題に遭遇するということをお伝えしたいだけです。ナビゲーションバーにいつも立体感が欠けていると感じるかもしれません。今日はそれを見てみましょう。

<!DOCTYPE html>
<html>
	<ヘッド>
		<メタ文字セット="utf-8" />
		<スタイル>
			体{
				マージン: 0;
			}
			.clearfix {
			  オーバーフロー: 自動;
			}
			.シャドウボックス{
				ボックスの影: 0px 3px 10px 1px #888888;
			}
			div.sticky{
				
				位置: 固定;
				上: 0;
				
				背景:紺色;
				テキスト配置: 中央;
				
				
			}
			.img1{
				フロート: 左;
				クリア: 両方;
				左マージン:100px;
				不透明度: 0.8;
				オーバーフロー:自動;
				
			}
			
			ul{
				リストスタイルタイプ: 0;
				マージン: 0;
				パディング: 0;
				幅: 7%;
				高さ: 100%;
				背景色:rgb(147, 171, 235);
				位置:固定;
				オーバーフロー:自動;
				境界線の半径: 25px;
				
				
			}
			li a{
				表示: ブロック;
				色:#000;
				パディング: 8px 16px;
				テキスト装飾: なし;
				フォントファミリ:"太字";
				
			}
			li:ホバー{
				背景色: #555;
				色: 白;
				
			}
			
		</スタイル>
		<title>XR公式サイト</title>
	</head>
	
	
	<本文>
		
		<div class="sticky clearfix shadow_box">
			<img class="img1" src="img/4.png" 幅="60px" 高さ="60px" />
			
		</div>
		<div>
			<ul>
				<li><a href="index.html">コアテクノロジー</a></li>
				<li><a href="index.html">党と政府のセクション</a></li>
				<li><a href="index.html">事業状況</a></li>
				<li><a href="index.html">今後の展開</a></li>
				<li><a href="index.html">お問い合わせ</a></li>
			</ul>
		</div>
		<div style="padding-bottom: 2000px;"></div>
		
	</本文>
</html>

完全なコードに直接、これもみんなのお気に入りの方法であり、これ以上の先延ばしは不要です。私たちは主にこれを見て

ここに画像の説明を挿入

これが影効果の「犯人」です。box-shadow を定義して関連するパラメータを指定したので、このように設定できます。友人が尋ねました。このパラメータは何を意味し、どうすればわかるのですか?大丈夫、写真でお伝えします！

ここに画像の説明を挿入

box-shadow についてはこれですべてです。設定できると思います。それでも方法がわからない場合は、メッセージを残していただければ設定をお手伝いします。ご支援ありがとうございます！

これで、HTML レイヤードボックスシャドウ効果に関するこの記事は終了です。HTML レイヤードボックスシャドウに関するその他の関連コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<:

>>: CSS3のtransform属性で実装される4つの機能