ホームページ > 記事 > ウェブフロントエンド > 枠線CSSの4辺を追加する方法
枠線CSSの4辺を追加する方法
- 藏色散人オリジナル
- 2021-01-05 10:34:414551ブラウズ
CSS で境界線の 4 辺を設定する方法: 1. border-bottom 属性を使用して下境界線を設定します; 2. border-left 属性を使用して左境界線を設定します; 3.右側の境界線を設定するには、border-right 属性を使用します。 4. border を使用します。 -top 属性は、上部の境界線を設定します。
このチュートリアルの動作環境: 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:
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辺を追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。