ホームページ > 記事 > ウェブフロントエンド > CSSの枠線の設定方法

CSSの枠線の設定方法

清浅オリジナル: 2018-12-11 16:55:2730265ブラウズ

CSS 境界線の設定方法: border-style 属性を使用して境界線を設定できます。ボーダースタイル属性は、点線、点線、実線、3D溝枠、尾根枠、3D差し込み枠などに設定できます。

[おすすめコース: CSS チュートリアル]

CSS 枠線を設定するメソッド:

境界線スタイル border-style

この属性は、要素のすべての境界線のスタイルを設定するか、要素ごとに境界線を設定するために使用されます。スタイル

境界線スタイルには次のタイプがあります。

none: 境界線が定義されていません。つまり、境界線がありません
dotted: 境界線のスタイルは点線の境界線です。
dashed: 境界線のスタイルは破線です。
solid: 境界線のスタイルは実線です。ほとんどのブラウザでは実線で表示されます。
double: 境界線のスタイルは二重線です。二重線の幅は、border-width の値と同じです。
groove: 境界線スタイルは 3D 溝境界線であり、その効果は border-color の値によって異なります。
#ridge: 境界線のスタイルは尾根の境界線であり、その効果は border-color の値によって異なります。
inset: 境界線スタイルは 3D 差し込み境界線であり、その効果は border-color の値によって異なります。
outset: 境界線スタイルは 3D アウトセット境界線であり、その効果は border-color の値によって異なります。
#inherit: 境界線のスタイルは親要素から継承する必要があります。

ケース:

境界線の上端を点、下端を点線、左側と右側を実線

div{
			width:100px;
			height: 100px;
			border-style: dotted solid dashed solid;
			border-color: pink;
		}

レンダリングは次のとおりです。

CSSの枠線の設定方法

境界を3D溝と隆起の境界に設定します

<style type="text/css">
		.box1{
			width:100px;
			height:30px;
			border:5px groove pink;
			margin-bottom: 5px;

		}
		.box2{
			width:100px;
			height:30px;
			border:5px ridge  pink;

		}
	</style>
</head>
<body>
	<div class="box1">3D 凹槽边框</div>
	<div class="box2">垄状边框</div>
</body>

レンダリング

CSSの枠線の設定方法

要約: 上記がこの記事の全内容です。ボーダースタイルを学習する皆さんのお役に立てれば幸いです。

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

css double 继承 border

声明：

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

前の記事：CSS の一般的なアダプティブレイアウトは何ですか?次の記事：CSS の一般的なアダプティブレイアウトは何ですか?

続きを見る

ボーダースタイル属性の概要