ホームページ > 記事 > ウェブフロントエンド > ボーダースタイル属性の使い方
ボーダースタイル属性の使い方
- 青灯夜游オリジナル
- 2019-02-15 13:31:357316ブラウズ
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 サイトの他の関連記事を参照してください。