HTML divの境界線を設定する方法-フロントエンドQ&A-php.cn

HTML divの境界線を設定する方法

青灯夜游

リリース： 2023-01-03 09:28:35

オリジナル

20138 人が閲覧しました

html div 要素の境界線は、border 関連の属性を使用して設定できます: 1. border 属性は、上下左右の境界線のスタイルを同時に設定します; 2. border- top、border-bottom、border-left、border-right の各属性は個別に設定され、上、下、左、右の境界線のスタイルが設定されます。

HTML divの境界線を設定する方法

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

CSS 境界線プロパティを使用すると、要素の境界線のスタイルと色を指定できます。

例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
			div {
				width: 250px;
				margin: 50px 0px;
				padding: 20px 10px;
			}
			.box1{
				border: 1px solid red;
			}
			.box2{
				border-top: 1px solid green;
			}
			.box3{
				border-bottom: 1px solid green;
			}
			.box4{
				border-left: 1px solid green;
			}
			.box5{
				border-right: 1px solid green;
			}

		</style>
	</head>

	<body>
		<div class="box1">border属性设置使用边框样式</div>
		<div class="box2">border-top属性设置上边框样式</div>
		<div class="box3">border-bottom属性设置下边框样式</div>
		<div class="box4">border-left属性设置左边框样式</div>
		<div class="box5">border-right属性设置右边框样式</div>
	</body>

</html>

ログイン後にコピー

レンダリング:

HTML divの境界線を設定する方法

##[推奨チュートリアル:

CSS ビデオチュートリアル、htmlビデオチュートリアル]

CSS 境界線プロパティ

##プロパティborderborder-styleborder-widthborder-colorborder-bottomborder-bottom-colorborder-bottom-styleborder-bottom-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-rightborder-right-colorborder-right-styleborder-right-widthborder-topborder-top-colorborder-top-styleborder-top-widthプログラミング関連の知識について詳しくは、

説明
1 つのステートメント内の 4 つの側面の属性を設定するために使用される略語属性。
は、要素のすべての境界線のスタイルを設定するか、各辺の境界線スタイルを個別に設定するために使用されます。
要素のすべての境界線の幅を設定するか、各境界線の幅を個別に設定するために使用される短縮属性。
省略形の属性。要素のすべての境界線の表示部分の色を設定するか、4 つの辺のそれぞれの色を設定します。
略語属性。下枠のすべての属性を 1 つのステートメントに設定するために使用されます。
要素の下枠の色を設定します。
要素の下枠のスタイルを設定します。
要素の下枠の幅を設定します。
左ボーダーのすべてのプロパティを 1 つのステートメントに設定するために使用される省略形プロパティ。
要素の左境界線の色を設定します。
要素の左境界線のスタイルを設定します。
要素の左境界線の幅を設定します。
右ボーダーのすべてのプロパティを 1 つのステートメントに設定するために使用される略語プロパティ。
要素の右枠の色を設定します。
要素の右枠のスタイルを設定します。
要素の右側の境界線の幅を設定します。
省略形属性。上部境界線のすべての属性を 1 つのステートメントに設定するために使用されます。
要素の上端の境界線の色を設定します。
要素の上端の境界線のスタイルを設定します。
要素の上枠の幅を設定します。