ホームページ > 記事 > ウェブフロントエンド > CSSで点線の表示を制御できますか?
CSSで点線の表示を制御できますか?
- 青灯夜游オリジナル
- 2022-09-14 14:16:292324ブラウズ
CSSで点線の表示を制御できます。 CSS では、border-style 属性を使用して破線の境界線スタイルを設定できます。要素に「border-style:dashed;」スタイルを追加するだけで済みます。border-style 属性は、要素のスタイルを設定するために使用されます。要素の境界線。値が「dashed 」の場合、点線の境界線スタイルを定義できます。
このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。
CSS で点線の表示を制御するには、border-style 属性を使用します。
border-style 属性は、要素の境界線のスタイルを設定するために使用され、値が "dashed" の場合、破線の境界線スタイルを定義できます。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
p.dashed {
border-style: dashed
}
p.solid {
border-style: solid
}
</style>
</head>
<body>
<p class="dashed">这是虚线边框样式！</p>
<p class="solid">这是实线边框样式！</p>
</body>
</html>
border-style 属性に設定できる値
| Value | 説明 |
|---|---|
| none | 境界線を定義しません。 |
| hidden | 「なし」と同じ。ただし、テーブルに適用される場合は例外で、境界線の競合を解決するために非表示が使用されます。 |
| 点線 | 点線の境界線を定義します。ほとんどのブラウザでは実線として表示されます。 |
| dashed | 破線を定義します。ほとんどのブラウザでは実線として表示されます。 |
| solid | 実線を定義します。 |
| 二重線を定義します。二重線の幅は、border-width の値と同じです。 | |
| 3D 溝の境界線を定義します。効果はborder-colorの値によって異なります。 | |
| 3D 尾根の境界を定義します。効果はborder-colorの値によって異なります。 | |
| 3D 差し込み枠を定義します。効果はborder-colorの値によって異なります。 | |
| 3D アウトセット境界線を定義します。効果はborder-colorの値によって異なります。 | |
| 境界線のスタイルを親要素から継承することを指定します。 |
- border-top-style 属性: 上部境界線のスタイル
- border-bottom-style 属性:下の境界線スタイル
- border-left-style 属性: 左境界線スタイル
- border-right-style 属性: 右境界線スタイル
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
p.dashed {
border-top-style: dashed;
border-bottom-style: dashed
}
p.solid {
border-left-style: solid;
border-right-style: solid;
}
</style>
</head>
<body>
<p class="dashed">这是虚线边框样式！</p>
<p class="solid">这是实线边框样式！</p>
</body>
</html>
Web フロントエンド ）
以上がCSSで点線の表示を制御できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。