CSS border-inline-start-color 属性

定義と使用法

border-inline-start-color 属性を設定する必要があります。

注意：要素の行内方向の開始位置に border-inline-start-color 属性が生效するには、 border-inline-start-style 属性。

CSS border-inline-start-color 属性と border-bottom-color、border-left-color、border-right-color および border-top-color 属性は非常に似ていますが border-inline-start-color 属性は行内方向に依存しています。

注意：に関連する CSS 属性 writing-mode、text-orientation および direction 行内方向を定義します。これは一行の開始と終了位置、および border-inline-start-color 属性の効果。英語のページでは、行内方向は左から右、ブロック方向は下に向かっています。

インスタンス

例 1

行内方向の開始处的境界線に色を設定する：

div {
  border-inline-start-style: solid;
  border-inline-start-color: pink;
}

実際に試してみる

例 2

writing-mode 属性を使用して

行内方向の開始处的境界線位置に影響を与えます writing-mode 属性の影響：

div {
  border-inline-start-style: solid;
  writing-mode: vertical-rl;
  border-inline-start-color: 5px;
}

実際に試してみる

例 3

direction 属性を使用して

行内方向の開始と終了处的境界線位置に影響を与えます direction 属性の影響：

div {
  direction: rtl;
  border-inline-start-color: hotpink;
}

実際に試してみる

CSS 语法

border-inline-start-color: color|transparent|initial|inherit;

属性値

値 説明
color 指定された境界線の色。デフォルトは要素の現在の色です。参照：CSS カラーワード。
transparent 指定された境界線の色は透明であるべきです。
initial この属性をデフォルト値に設定します。参照： initial。
inherit この属性は親要素から継承されます。参照： inherit。

技術的な詳細

デフォルト値： 要素の現在の色
継承性： いいえ
アニメーション作成： サポート。参照：アニメーション関連属性。
バージョン： CSS3
JavaScript 语法： object.style.borderInlineStartColor="pink"

ブラウザのサポート

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

Chrome Edge Firefox Safari Opera
69.0 79.0 41.0 12.1 56.0

関連ページ

チュートリアル：CSS 枠線

参照：CSS ボーダー属性

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

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

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

参照：CSS ボーダーボトムカラー属性

参照：CSS border-left-color 属性

参照：CSS border-right-color 属性

参照：CSS border-top-color 属性

参照：CSS direction 属性

参照：CSS text-orientation 属性

参照：CSS writing-mode 属性