CSS border-inline-start-style 属性

定義と用法

行内方向を定義します。これにより、一行の始まりと終わりの位置、および 属性は、行内方向の始まり处的要素の枠線のスタイルを設定します。

CSSの 行内方向を定義します。これにより、一行の始まりと終わりの位置、および 属性は border-bottom-styleborder-left-styleborder-right-style text-orientation border-top-style 属性は非常に似ていますが、 行内方向を定義します。これにより、一行の始まりと終わりの位置、および 属性は行内方向に依存しています。

注意：関連する CSS 属性 行内方向の始まりのエッジの位置は、、 text-orientation 行内方向の始まりと終わりのエッジの位置は、 そして 行内方向を定義します。これにより、一行の始まりと終わりの位置、および border-inline-start-style

属性の結果。英語ページでは、行内方向は左から右、ブロック方向は下に向かっています。

インスタンス

例 1

属性の影響：
  direction: rtl;

border-inline-start-style: dotted;

行内方向の始まりのエッジにスタイルを設定する：

例 2：writing-mode 属性との組み合わせ 行内方向の始まりのエッジの位置は、 direction

属性の影響：
  writing-mode
  direction: rtl;

border-inline-start-style: dotted;

writing-mode: vertical-rl;

例 3：direction 属性との組み合わせ 行内方向の始まりと終わりのエッジの位置は、 direction

属性の影響：
  div {
  direction: rtl;

border-inline-start-style: dotted;

}

自分で試してみる

CSS 言語

border-inline-start-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit; 属性値
none 値
説明 デフォルト値。エッジを指定しません。
hidden noneと同じですが、テーブル要素のエッジの衝突解決における動作が異なります。
dashed ダッシュエッジを指定します。
solid ソリッドエッジを指定します。
double ダブルラインエッジを指定します。
groove

3D グローヴエッジを指定します。

効果は border-color の値によって異なります。
ridge

3D リグジッドエッジを指定します。

効果は border-color の値によって異なります。
inset

3D インセットエッジを指定します。

効果は border-color の値によって異なります。
outset

3D アウトセットエッジを指定します。

効果は border-color の値によって異なります。
initial この属性をデフォルト値に設定します。参照： initial。
inherit この属性は親要素から継承されます。参照： inherit。

技術的詳細

デフォルト値： none
継承性： いいえ
アニメーション作成： サポートされていません。参照：アニメーション関連属性。
バージョン： CSS3
JavaScript 言語： object.style.borderInlineStartStyle="dotted"

ブラウザのサポート

テーブルの数字は、その属性を完全にサポートする最初のブラウザのバージョンを示しています。

クローム エッジ ファイアフォックス サファリ オペラ
69.0 79.0 41.0 12.1 56.0

関連ページ

チュートリアル：CSS 边框

参照：CSS ボーダー属性

参照：CSS ボーダインライン属性

参照：CSS ボーダインラインエンドスタイル属性

参照：CSS border-inline-start-style 属性

参照：CSS ボーダーボトムスタイル属性

参照：CSS border-left-style 属性

参照：CSS border-right-style 属性

参照：CSS border-top-style 属性

参照：CSS direction 属性

参照：CSS text-orientation 属性

参照：CSS writing-mode 属性