CSS ボーダーは、HTML コンポーネントの周囲のボーダーを特徴づけ、スタイルを設定するために使用される重要なプロパティです。境界線はウェブサイトの構成において重要な役割を果たし、分離、強調、スタイリッシュな魅力を生み出すのに役立ちます。 CSS では、いくつかの境界線関連のプロパティを利用して、これらの境界線のスタイル、種類、サイズ、形状を制御できます。この記事では、これらの CSS 境界線プロパティと実際にそれらを活用する方法を調査します。
CSS 境界線のプロパティ
CSS 境界線プロパティは、コンポーネントの境界線のスタイル、種類、幅、干満を決定するために利用されます。これらのプロパティには次のものが含まれます。
日付に文字列を入力する
- ボーダースタイル
- ボーダの色
- 境界線の幅
- 境界半径
1) CSS ボーダースタイル
境界線スタイル プロパティは、Web ページに表示する境界線の種類を指定するために使用されます。
境界線を定義するために、border-style プロパティとともに使用される境界線スタイルの値がいくつかあります。
| 価値 | 説明 |
|---|---|
| なし | 境界線を定義するものではありません。 |
| 点在 | 点線の境界線を定義するために使用されます。 |
| 破線 | 破線の境界線を定義するために使用されます。 |
| 固体 | 実線の境界線を定義するために使用されます。 |
| ダブル | 同じボーダー幅値を持つ 2 つのボーダーを定義します。 |
| 溝 | 3D の溝付き境界線を定義します。効果はborder-color値に従って生成されます。 |
| 海嶺 | 3D の隆起した境界線を定義します。効果はborder-color値に従って生成されます。 |
| 差し込み | 3D 差し込み境界線を定義します。効果はborder-color値に従って生成されます。 |
| 最初 | 3D アウトセット境界線を定義します。効果はborder-color値に従って生成されます。 |
例：
.border-example { width: 150px; height: 30px; margin: 10px; padding: 10px; } .dotted { border: 2px dotted #FFA500; } .dashed { border: 2px dashed #008000; } .solid { border: 2px solid #000; } .double { border: 4px double #FF0000; } .groove { border: 3px groove #3333FF; } .ridge { border: 3px ridge #660066; } .inset { border: 3px inset #006600; } .outset { border: 3px outset #990000; } Dotted Border Dashed Border Solid Border Double Border Groove Border Ridge Border Inset Border Outset Border 出力：
inttostr java
2) CSS ボーダー幅
border-width プロパティは、境界線の幅を設定するために使用されます。ピクセル単位で設定されます。また、あらかじめ定義された 3 つの値 (細、中、または太) のいずれかを使用して境界線の幅を設定することもできます。
注: border-width プロパティは単独では使用されません。これは、他の方法では機能しない最初に境界線を設定するために、「border-style」プロパティなどの他の境界線プロパティとともに常に使用されます。
/* CSS for different border widths */ .thin-border { border: 2px solid #FF0000; /* It is 2-pixel wide solid red border */ } .medium-border { border: 4px solid #00FF00; /* It is 4-pixel wide solid green border */ } .thick-border { border: 6px solid #0000FF; /* It is 6-pixel wide solid blue border */ } .custom-border { border: 3px dashed #FFA500; /* It is 3-pixel wide dashed orange border */ } <p class="thin-border"> Thin Border </p> <p class="medium-border"> Medium Border </p> <p class="thick-border"> Thick Border </p> Custom Border 出力：
3) CSS 境界線の色
境界線の色を設定するには 3 つの方法があります。
- 名前: 色の名前を決定します。例: 「赤」。
- RGB: 色の RGB 値を決定します。例:「rgb(255,0,0)」。
- Hex: 色の 16 進値を決定します。例:「#ff0000」。
注: border-color プロパティは単独では使用されません。これは、他の方法では機能しない最初に境界線を設定するために、「border-style」プロパティなどの他の境界線プロパティとともに常に使用されます。
例：
.my-element { width: 200px; height: 100px; border: 2px solid #333; /* The Initial border color is dark gray */ transition: border-color 0.5s; /* Adding a smooth transition effect */ } .my-element:hover { border-color: blue; /* This changes the border color to blue when hovering */ } Hover 出力：
