ホームページ  >  記事  >  ウェブフロントエンド  >  CSSで枠線のサイズと色を設定する方法

CSSで枠線のサイズと色を設定する方法

青灯夜游
青灯夜游オリジナル
2021-11-09 16:47:5910902ブラウズ

CSS で境界線のサイズと色を設定する方法: 1. border-width 属性を使用して要素の境界線のサイズを設定します (構文は "border-width: width value;"; 2. を使用します) border-color 属性を使用して境界線の色を設定します。構文は「border-color: color value;」です。

CSSで枠線のサイズと色を設定する方法

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

すべての HTML 要素はボックスとして表示できます。CSS では、「ボックス モデル」という用語がデザインとレイアウトで使用されます。

CSS ボックス モデルは、本質的には、マージン、ボーダー、パディング、実際のコンテンツなどの周囲の HTML 要素をカプセル化するボックスです。

ボックス モデルを使用すると、他の要素と周囲の要素の境界線の間のスペースに要素を配置できます。

CSSで枠線のサイズと色を設定する方法

CSS で境界線のサイズと色を設定します

CSS で境界線のサイズを設定します

css では、border-width 属性を使用して要素の境界線のサイズを設定します。

<!DOCTYPE html>
<html>
	<head>
		<style>
			div {
				height: 50px;
				margin: 20px;
			}

			.box1 {
				border: 1px solid red;
			}

			.box2 {
				border: 5px solid red;
			}
		</style>
	</head>
	<body>
		<div class="box1"></div>
		<div class="box2"></div>
	</body>
</html>

CSSで枠線のサイズと色を設定する方法

css の境界線スタイルの設定

css では、border-color 属性を使用して境界線の色を設定できます。

<!DOCTYPE html>
<html>
	<head>
		<style>
			div {
				height: 50px;
				margin: 20px;
				border: 2px solid red;
			}

			.box1 {
				border-color: paleturquoise;
			}

			.box2 {
				border-color: goldenrod;
			}
		</style>
	</head>
	<body>
		<div class="box1"></div>
		<div class="box2"></div>
	</body>
</html>

CSSで枠線のサイズと色を設定する方法

(学習ビデオ共有: css ビデオ チュートリアル

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

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