CSS border-inline-color özelliği

Önceki Sayfa border-inline
Sonraki Sayfa border-inline-end

定义和用法

border-inline-color 属性设置元素在行内方向上的边框颜色。

Dikkat:要使 border-inline-color 属性生效，必须设置 border-inline-style.

border-inline-color 属性的值可以通过不同方式设置：

如果 border-inline-color 属性有两个值：

border-inline-color: pink blue;

行内起始处的边框颜色为粉色
行内结束处的边框颜色为蓝色

如果 border-inline-color 属性有一个值：

border-inline-color: blue;

行内起始处和结束处的边框颜色均为蓝色

CSS 的 border-inline-color 属性与 border-bottom-color,border-left-color,border-right-color ve border-top-color Özellikler çok benzerdir, ancak border-inline-color Bu özellik içerik yönüne bağlıdır.

Dikkat:ilgili CSS özelliklerini writing-mode,text-orientation ve direction İçerik yönünü tanımlar. Bu, bir satırın başlangıç ve bitiş konumlarını ve border-inline-color Özellik Etkisi. İngilizce sayfalar için içerik yönü sağdan sola, blok yönü aşağıya doğru gider.

Örnek

Örnek 1

İçerik yönündeki kenar çizgisi rengini ayarlayın:

#example1 {
  border-inline-style: solid;
  border-inline-color: pink;
}
#example2 {
  border-inline-style: solid;
  border-inline-color: pink lightblue;
}

Kişisel Deneyim

Örnek 2: writing-mode Özelliğiyle Birleştirme

İçerik yönündeki başlangıç ve bitiş konumlarındaki kenar çizgileri writing-mode Özellik Etkisi:

div {
  border-inline-style: solid;
  writing-mode: vertical-rl;
  border-inline-color: blue;
}

Kişisel Deneyim

Örnek 3: direction Özelliğiyle Birleştirme

İçerik yönündeki başlangıç ve bitiş konumlarındaki kenar çizgileri direction Özellik Etkisi:

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

Kişisel Deneyim

CSS Dilbilgisi

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

Özellik Değeri

Değer	Açıklama
color	Kenar çizgisi rengini belirlemek için. Varsayılan renk, öğenin mevcut rengidir. CSS Renk Değerlerini Kontrol Ederek Olası Renk Değerleri Tam Listesini Alın.
transparent	Kenar çizgisi rengini belirlemek için şeffaf olmalıdır.
initial	Bu özelliği varsayılan değerine ayarlayın. Bakınız initial.
inherit	Bu özelliği ebeveyn öğesinden kalıtsın. Bakınız inherit.

Teknik Ayrıntılar

Varsayılan Değer:	Öğenin mevcut rengi
Kalıtım:	Hayır
Animasyon Yapımı:	Destekleniyor. Bakınız:Animasyon İle İlgili Özellikler.
Sürüm:	CSS3
JavaScript Dilbilgisi:	object.style.borderInlineColor="pink"