CSSで点線の表示を制御できますか?-フロントエンドQ&A-php.cn

CSSで点線の表示を制御できますか?

青灯夜游

リリース： 2022-09-14 14:16:29

オリジナル

2330 人が閲覧しました

CSSで点線の表示を制御できます。 CSS では、border-style 属性を使用して破線の境界線スタイルを設定できます。要素に「border-style:dashed;」スタイルを追加するだけで済みます。border-style 属性は、要素のスタイルを設定するために使用されます。要素の境界線。値が「dashed 」の場合、点線の境界線スタイルを定義できます。

CSSで点線の表示を制御できますか?

このチュートリアルの動作環境: 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>

ログイン後にコピー

CSSで点線の表示を制御できますか?

border-style 属性に設定できる値

#double二重線を定義します。二重線の幅は、border-width の値と同じです。 groove3D 溝の境界線を定義します。効果はborder-colorの値によって異なります。 ridge3D 尾根の境界を定義します。効果はborder-colorの値によって異なります。 inset3D 差し込み枠を定義します。効果はborder-colorの値によって異なります。アウトセット3D アウトセット境界線を定義します。効果はborder-colorの値によって異なります。 inherit 境界線のスタイルを親要素から継承することを指定します。

Value	説明
none	境界線を定義しません。
hidden	「なし」と同じ。ただし、テーブルに適用される場合は例外で、境界線の競合を解決するために非表示が使用されます。
点線	点線の境界線を定義します。ほとんどのブラウザでは実線として表示されます。
dashed	破線を定義します。ほとんどのブラウザでは実線として表示されます。
solid	実線を定義します。

説明:

border-style 属性は、要素の 4 つの境界線のスタイルを設定できる短縮属性です。別の境界線スタイルは次のように実現できます:

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>

ログイン後にコピー

CSSで点線の表示を制御できますか?