ボーダースタイル属性の使い方-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

ボーダースタイル属性の使い方

青灯夜游

Feb 15, 2019 pm 01:31 PM

border-stylecss

border-style 属性は、要素の 4 つの境界線のスタイルを同時に設定するか、各辺の境界線スタイルを個別に設定するために使用されます。

ボーダースタイル属性の使い方

#CSS ボーダースタイルプロパティ

関数: は設定に使用されます。要素すべての境界線をスタイル設定するか、各辺の境界線スタイルを個別に設定します。 1 ～ 4 つの値を指定できます。例:

p.one {border-style:dotted dashed solid double;}
p.two {border-style:dotted solid double;}
p.three {border-style:dotted solid;}
p.four {border-style:dotted;}

レンダリング:

ボーダースタイル属性の使い方

##説明:

border-style 属性が指定されている場合のみ境界線は、値が none でない場合にのみ表示されます。

設定できる属性値:

none: 境界線を定義しません。

hidden: 「なし」と同じ。ただし、テーブルに適用される場合は例外で、境界線の競合を解決するために非表示が使用されます。

点線: 点線の境界線を定義します。ほとんどのブラウザでは実線として表示されます。

dashed: 破線を定義します。ほとんどのブラウザでは実線として表示されます。

solid: 実線を定義します。

double: 二重線を定義します。二重線の幅は、border-width の値と同じです。

groove: 3D 溝の境界を定義します。効果はborder-colorの値によって異なります。

ridge: 3D リッジの境界を定義します。効果はborder-colorの値によって異なります。

inset: 3D 差し込み枠を定義します。効果はborder-colorの値によって異なります。

outset: 3D アウトセット境界線を定義します。効果はborder-colorの値によって異なります。

inherit: 境界線のスタイルを親要素から継承することを指定します。

#CSS ボーダースタイルプロパティの使用例

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p.dotted {border-style: dotted}
p.dashed {border-style: dashed}
p.solid {border-style: solid}
p.double {border-style: double}
p.groove {border-style: groove}
p.ridge {border-style: ridge}
p.inset {border-style: inset}
p.outset {border-style: outset}
</style>
</head>
<body>
<p class="dotted">dotted边框</p>
<p class="dashed">dashed边框</p>
<p class="solid">solid边框</p>
<p class="double">double边框</p>
<p class="groove">groove边框</p>
<p class="ridge">ridge边框</p>
<p class="inset">inset边框</p>
<p class="outset">outset边框</p>
</body>
</html>

レンダリング:

# #

以上がボーダースタイル属性の使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

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