CSS border-inline-start 属性
定義と使用方法
border-inline-start 属性は以下の属性の短縮形です：
CSS border-inline-start 属性は以下の CSS 属性と関連しています： border-bottom、border-left、border-right と}} border-top 非常に似ていますが、 border-inline-start 属性はインライン方向に依存しています。
注意：関連する CSS 属性 writing-mode、テキストの向き と}} direction 行内方向を定義します。これは、一行の始点と終点、および border-inline-start 属性の結果。英語ページでは、行内方向は左から右、ブロック方向は上から下です。
例
例1
行内方向の始点の辺框の幅、色、スタイルを設定します：
div {
border-inline-start: 10px solid pink;
}
例2：writing-mode属性と組み合わせた場合
行内方向の始点の辺框位置は、 writing-mode 属性の影響：
div {
writing-mode: vertical-rl;
border-inline-start: 5px solid blue;
}
例3：direction属性と組み合わせた場合
行内方向の始点の辺框位置は、 direction 属性の影響：
div {
direction: rtl;
border-inline-start: 5px solid hotpink;
}
CSS文法
border-inline-start: border-inline-start-width border-inline-start-style border-inline-start-color|initial|inherit;
属性値
| 値 | 説明 |
|---|---|
| border-inline-start-width |
指定された要素の行内方向の始点の辺框幅を指定します。 デフォルト値は medium です。 |
| border-inline-start-style |
指定された要素の行内方向の始点の辺框スタイルを指定します。 デフォルト値は none です。 |
| border-inline-start-color |
指定された要素の行内方向の始点の辺框色を指定します。 デフォルト値は、边框の現在の色です。 |
| initial | この属性をデフォルト値に設定します。参照 initial。 |
| inherit | 親要素からこの属性を継承します。参照 inherit。 |
技術的詳細
| デフォルト値： | medium none currentcolor |
|---|---|
| 継承性： | いいえ |
| アニメーション作成： | サポート。参照：アニメーション関連属性。 |
| バージョン： | CSS3 |
| JavaScript语法： | object.style.borderInlineStart="pink dotted 5px" |
ブラウザのサポート
テーブルの数字は、この属性を完全にサポートする最初のブラウザのバージョンを示しています。
| クローム | エッジ | ファイアフォックス | サファリ | オペラ |
|---|---|---|---|---|
| 69.0 | 79.0 | 41.0 | 12.1 | 56.0 |
関連ページ
チュートリアル：CSS 边框
参照：CSS ボーダー属性
