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

CSSで段落の境界線を設定する方法

青灯夜游

リリース： 2022-01-20 17:40:51

オリジナル

2683 人が閲覧しました

CSS で段落の境界線を設定する方法: 1. p 要素に border 属性を設定して、段落に上下左右の 4 つの境界線を同時に追加します; 2. border-top を設定します。、border-bottom、border-left、border-right プロパティは、段落にそれぞれ上、下、左、右の境界線を追加するために使用されます。

CSSで段落の境界線を設定する方法

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

css 段落境界線の設定

1. 境界線属性を使用します

<!DOCTYPE html>
<html>
	<head>
		<style type="text/css">
			p{
				padding: 10px;
				border: 1px solid red;
			}
		</style>
	</head>

	<body>
		<p>测试元素</p>
	</body>

</html>

ログイン後にコピー

CSSで段落の境界線を設定する方法

2. border-top、border-bottom、border-left、border-right 属性をそれぞれ使用します。 abbreviation 属性を使用するには、上枠のすべてのプロパティを 1 つのステートメントに設定します。

border-bottom 省略表現属性。下の境界線のすべての属性を 1 つのステートメントに設定するために使用されます。
border-left 省略表現プロパティ。左境界線のすべてのプロパティを 1 つのステートメントに設定するために使用されます。
border-right 省略表現プロパティ。右ボーダーのすべてのプロパティを 1 つのステートメントに設定するために使用されます。

<!DOCTYPE html>
<html>
	<head>
		<style type="text/css">
			p{
				padding: 10px;
				border-top: 2px solid red;
				border-bottom: 2px solid paleturquoise;
				border-left: 2px solid green;
				border-right: 2px solid blue;
			}
		</style>
	</head>

	<body>
		<p>测试元素</p>
	</body>

</html>

ログイン後にコピー

） CSSで段落の境界線を設定する方法