CSSで枠線のサイズと色を設定する方法-CSSチュートリアル-php.cn

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

青灯夜游

リリース： 2021-11-09 16:47:59

オリジナル

10847 人が閲覧しました

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で枠線のサイズと色を設定する方法