枠線CSSの4辺を追加する方法-CSSチュートリアル-php.cn

枠線CSSの4辺を追加する方法

藏色散人

リリース： 2023-01-04 09:38:37

オリジナル

4567 人が閲覧しました

CSS で境界線の 4 辺を設定する方法: 1. border-bottom 属性を使用して下境界線を設定します; 2. border-left 属性を使用して左境界線を設定します; 3.右側の境界線を設定するには、border-right 属性を使用します。 4. border を使用します。 -top 属性は、上部の境界線を設定します。

枠線CSSの4辺を追加する方法

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

関連する推奨事項: 「css ビデオチュートリアル」

境界線 CSS の 4 辺を追加するにはどうすればよいですか?

1. border 属性を使用して 4 つの境界線のスタイルを一度に設定します

border: すべての境界線属性を 1 つのステートメントで設定します。

設定可能な境界線属性:

border-width: 境界線の幅を指定します。

border-style: 境界線のスタイルを指定します。

border-color: 境界線の幅を指定します。 border Color

例: 4 つの境界線スタイルを設定

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
p
{
border:5px solid red;
}
</style>
</head>
<body>
<p>段落中的一些文本。</p>
</body>
</html>

ログイン後にコピー

Rendering:

枠線CSSの4辺を追加する方法

2. border-bottom、border-left、border を使用します。 -right と border-top は、それぞれ 4 つの境界線のスタイルを設定します。

border-bottom: 1 つのステートメントですべての下境界線のプロパティを設定します。

border-left: すべての左境界プロパティを 1 つのステートメントで設定します。

border-right: すべての右枠プロパティを 1 つのステートメントで設定します。

border-top: 1 つのステートメントですべての上枠プロパティを設定します。

例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
p 
{
border-bottom:thick dotted #ff0000;
border-left:thick solid #ff0000;
border-top:thick dashed #ff0000;
border-right:thick double #ff0000;
}
</style>
</head>
<body>
<p>段落中的一些文本。</p>
</body>
</html>

ログイン後にコピー

レンダリング:

枠線CSSの4辺を追加する方法