CSSで枠線の点線のスタイルを設定するにはどうすればよいですか? (コード例)

Web ページのレイアウトでは、Web ページ全体の美しさを高めるために、異なる境界線スタイルを設定する必要がある場合があります。では、境界線の点線のスタイルを設定するにはどうすればよいでしょうか?この記事ではCSSで枠線の点線のスタイルを設定する2つの方法を紹介します。困っている友人は参考にしていただければ幸いです。

まず、CSS では枠線の設定に border 属性を使用し、幅、色、丸め角度、スタイル (実線、点線、二重線など) を設定できることを知っておく必要があります。 ) の境界線。

簡単なコード例を使用して、CSS の border 属性が境界線の点線を設定する方法を見てみましょう。

html コード:

<div class="demo">
	<p class="p1">这是一段测试文字1，实现虚线边框</p>
	<p class="p2">这是一段测试文字2，实现虚线边框</p>

</div>

css コード:

	.p1 {
	border: 5px dashed #009999;
	padding: 10px;
}

.p2 {
	border: 5px dotted;
	border-color: linear-gradient(to right, red, yellow, blue);
	padding: 10px;

レンダリング:

それが表示されます。 CSS の border プロパティでは、ボーダーの 2 つの異なる点線スタイルを設定できることがわかりました。これらのスタイルは、border プロパティの dotted と dashed の 2 つのプロパティ値によって設定されます。境界線にこれら 2 つの属性値を設定した場合の効果を見てみましょう。

破線の値: 境界線が平らな点線スタイルを表示できるように点線を定義できます。

点線の値: 境界線が連続した点線の形で表示されるように点線の境界線を定義し、点線の点線スタイルの境界線を実現します。

注: すべてのブラウザは border 属性をサポートしているため、互換性について心配する必要はありません。

要約: 上記は、この記事で紹介した CSS で境界線の点線スタイルを設定する 2 つの方法です。ご自身で試して、必要に応じてさまざまな点線スタイルを使用してください。あなたの学びに。

関連する推奨事項:

CSS で境界線の角丸スタイルを設定するにはどうすればよいですか? border-radius プロパティは角丸スタイルを設定します

#CSS で重なっている境界線を削除するにはどうすればよいですか?

以上がCSSで枠線の点線のスタイルを設定するにはどうすればよいですか? (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。