ホームページ > 記事 > ウェブフロントエンド > CSSのborder-right-styleプロパティの使い方
CSSのborder-right-styleプロパティの使い方
- silencementオリジナル
- 2019-05-27 14:18:562832ブラウズ
border-right-style の定義と使用法
CSS では、border-right-style 属性を使用して、右の境界線。要素の右枠のスタイルを個別に設定したい場合は、この属性を使用できます。
border-right-style 属性の構文形式
css 構文: border-right-style: none / hidden / dotted / dosted / sold / double /grove / ridge / inset / outset / 継承;
border-right-style 属性値の説明
none: ボーダーレス要素を設定します (デフォルト);
hidden : none 属性値と同じ (ただし、表要素で使用される場合、境界線の競合を解決するために hidden が使用されます);
dotted: 境界線を点線に設定します (ほとんどのブラウザーは境界線をサポートしておらず、実線として表示します) line);
dashed: 境界線を点線に設定します (ほとんどのブラウザーは境界線をサポートしておらず、実線として表示します);
solid: 境界線を実線に設定します。
double: 境界線を二重線に設定します (幅は border-width プロパティの値と同じです);
groove: 境界線を 3D 溝に設定します (効果は異なります) border-color プロパティの値に基づいて);
ridge: 境界線を 3D リッジ境界線に設定します (効果は、border-color 属性の値によって異なります);
inset:境界線を 3D インセットに設定します (効果は、border-color 属性の値に依存します) );
outset: 境界線を 3D アウトセットに設定します (効果は、border-color 属性の値に依存します) ;
inherit: 親要素から境界線のスタイルを継承します。
インスタンス
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css border-right-style右边框样式属性笔记</title>
<style type="text/css">
body{background: #ddd;font-size:20px;}
#a,#b,#c,#d{margin-top:10px;width:400px;}
#a{border-right-style:solid;}
#b{border-right-style:dashed;}
#c{border-right-style:double;}
</style>
</head>
<body>
<div id = "a">solid：右边框为实线。</div>
<div id = "b">dashed：右边框为虚线（大多数浏览器不支持，显示为实线）</div>
<div id = "c">double：右边框为双线（宽度等于border-width属性的值）</div>
</body>
</html>実行結果
以上がCSSのborder-right-styleプロパティの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。