CSS3でボックスに影を設定する属性とは何ですか？-フロントエンドQ&A-php.cn

ホームページ

ウェブフロントエンド

フロントエンドQ&A

CSS3でボックスに影を設定する属性とは何ですか？

青灯夜游

May 18, 2022 pm 01:04 PM

css css3

ボックスに影を設定するための css3 属性は「box-shadow」です。この属性は、境界線の影効果を実現し、影をボックス要素に適用するために使用されます。構文は「box-shadow: 水平方向の影垂直方向の影ぼかし半径拡張半径影の色投影モード」です。投影モードが「inset」に設定されている場合は、」とインナーシャドウが実現できます。

CSS3でボックスに影を設定する属性とは何ですか？

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

css3 ボックスの影を設定する属性は「box-shadow」です。

box-shadow プロパティ - 境界線の影効果を実現する

box-shadow プロパティは、テキストボックスに影を適用できます。影のピクセルの長さ、幅、ぼかし距離、および影の色。

box-shadow はボックス要素に影を追加でき、1 つ以上の追加をサポートします。

box-shadow: X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色 投影方式;

ログイン後にコピー

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

CSS3でボックスに影を設定する属性とは何ですか？

注: inset は最初または最後のパラメータに記述できます。その他の位置は無効です。

X 軸オフセットと Y 軸オフセット値 (水平シェーディングと垂直シェーディング)
X 軸オフセットと Y-軸オフセット軸オフセット値は負の数値に設定できます。
影のぼかし半径:
このパラメータはオプションであり、値は次のとおりです。値が 0 の場合、影にブラー効果がないことを意味し、値が大きいほど、影のエッジがぼかされます。
シャドウ拡張半径:
このパラメータはオプションです。値は正または負にすることができます。値が正の場合、シャドウ全体が拡張されます。拡張するか、値が負の場合は小さくします。

#例

<html>
	<head>
		<meta charset="utf-8">
		<style>
			div{
				width: 300px;
				height: 100px;
				background:#fff;
				border: 1px solid  #FFC0CB;
				margin: 50px;
			}
			.box1 {
				
				box-shadow: 10px 10px 5px #888888;
			}
			.box2 {
				/* X轴偏移量为负数 */
				box-shadow:-10px 10px 5px #666;
			}
			.box3 {
				/* Y轴偏移量为负数 */
				box-shadow: 10px -10px 5px #888888;
			}
			.box4 {
				/* inset将外阴影改内阴影 */
				box-shadow: 10px 10px 10px #888888 inset;
			}
		</style>
	</head>
	<body>
		<div class="box1"></div>
		<div class="box2"></div>
		<div class="box3"></div>
		<div class="box4"></div>
	</body>
</html>

ログイン後にコピー

CSS3でボックスに影を設定する属性とは何ですか？

(学習ビデオ共有:

css ビデオチュートリアル、ウェブフロントエンド）

以上がCSS3でボックスに影を設定する属性とは何ですか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

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

ホットAIツール

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7738

Java チュートリアル

1643

CakePHP チュートリアル

1397

Laravel チュートリアル

1290

PHP チュートリアル

1233

Related knowledge

VueでBootstrapの使用方法 Apr 07, 2025 pm 11:33 PM

vue.jsでBootstrapを使用すると、5つのステップに分かれています。ブートストラップをインストールします。 main.jsにブートストラップをインポートしますブートストラップコンポーネントをテンプレートで直接使用します。オプション：カスタムスタイル。オプション：プラグインを使用します。

HTML、CSS、およびJavaScriptの役割：コアの責任 Apr 08, 2025 pm 07:05 PM

HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

ブートストラップにスプリットラインを書く方法 Apr 07, 2025 pm 03:12 PM

ブートストラップスプリットラインを作成するには2つの方法があります。タグを使用して、水平方向のスプリットラインを作成します。 CSS Borderプロパティを使用して、カスタムスタイルのスプリットラインを作成します。

ブートストラップのフレームワークをセットアップする方法 Apr 07, 2025 pm 03:27 PM

Bootstrapフレームワークをセットアップするには、次の手順に従う必要があります。1。CDNを介してブートストラップファイルを参照してください。 2。独自のサーバーでファイルをダウンロードしてホストします。 3。HTMLにブートストラップファイルを含めます。 4.必要に応じてSASS/LESSをコンパイルします。 5。カスタムファイルをインポートします（オプション）。セットアップが完了したら、Bootstrapのグリッドシステム、コンポーネント、スタイルを使用して、レスポンシブWebサイトとアプリケーションを作成できます。

HTML、CSS、およびJavaScriptの理解：初心者向けガイド Apr 12, 2025 am 12:02 AM

webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、

ブートストラップに写真を挿入する方法 Apr 07, 2025 pm 03:30 PM

ブートストラップに画像を挿入する方法はいくつかあります。HTMLIMGタグを使用して、画像を直接挿入します。ブートストラップ画像コンポーネントを使用すると、レスポンシブ画像とより多くのスタイルを提供できます。画像サイズを設定し、IMG-Fluidクラスを使用して画像を適応可能にします。 IMGボーダークラスを使用して、境界線を設定します。丸い角を設定し、IMGラウンドクラスを使用します。影を設定し、影のクラスを使用します。 CSSスタイルを使用して、画像をサイズ変更して配置します。背景画像を使用して、背景イメージCSSプロパティを使用します。