検索

ホームページ  >  記事  >  ウェブフロントエンド  >  CSSでdivの枠線スタイルを設定する方法

CSSでdivの枠線スタイルを設定する方法

青灯夜游
青灯夜游オリジナル
2021-04-21 14:54:519035ブラウズ

CSS では、border-style 属性を使用して div の境界線のスタイルを設定できます。「border-style: 属性値;」スタイル コードを div 要素に追加するだけです。 border-style 属性の一般的な値は、点線、破線、実線などです。

CSSでdivの枠線スタイルを設定する方法

このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。

css divの境界線スタイルを設定します

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<style type="text/css">
			div {
				margin: 10px 0;
			}
			
			div.dotted {
				border-style: dotted
			}
			
			div.dashed {
				border-style: dashed
			}
			
			div.solid {
				border-style: solid
			}
			
			div.double {
				border-style: double
			}
			
			div.groove {
				border-style: groove
			}
			
			div.ridge {
				border-style: ridge
			}
			
			div.inset {
				border-style: inset
			}
			
			div.outset {
				border-style: outset
			}
		</style>
	</head>

	<body>
		<div class="dotted">点状边框</div>

		<div class="dashed">虚线边框</div>

		<div class="solid">实线边框</div>

		<div class="double">双线边框</div>

		<div class="groove">3D 凹槽边框</div>

		<div class="ridge">3D 垄状边框</div>

		<div class="inset">3D inset 边框</div>

		<div class="outset">3D outset 边框</div>
	</body>

</html>

レンダリング:

CSSでdivの枠線スタイルを設定する方法

css border-style プロパティ

border-style プロパティは、要素のすべての境界線のスタイルを設定するか、各辺の境界線スタイルを個別に設定するために使用されます。

属性値:

#double二重線を定義します。二重線の幅は、border-width の値と同じです。 groove3D 溝の境界線を定義します。効果はborder-colorの値によって異なります。 ridge3D 尾根の境界を定義します。効果はborder-colorの値によって異なります。 inset3D 差し込み枠を定義します。効果はborder-colorの値によって異なります。 アウトセット3D アウトセット境界線を定義します。効果はborder-colorの値によって異なります。 inherit 境界線のスタイルを親要素から継承することを指定します。
値 説明
なし 境界線を定義しません。
hidden 「なし」と同じ。ただし、テーブルに適用される場合は例外で、境界線の競合を解決するために非表示が使用されます。
点線 点線の境界線を定義します。ほとんどのブラウザでは実線として表示されます。
dashed 破線を定義します。ほとんどのブラウザでは実線として表示されます。
solid 実線を定義します。
(学習ビデオ共有:

css ビデオ チュートリアル)

以上がCSSでdivの枠線スタイルを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：CSSでテーブルを非表示にする方法次の記事：CSSでテーブルを非表示にする方法

関連記事

続きを見る