CSS border-inline-style 属性

Tinukoy at Paggamit

border-inline-style Ang katangian ay nagtatakda ng estilo ng gilid ng elemento sa direksyon ng pagkalat.

border-inline-style Ang halaga ng katangian ay maaaring itatag sa iba't ibang paraan:

Kung border-inline-style Ang katangian ay may dalawang halaga:

border-inline-style: solid dotted;
  • Ang katangian ng gilid sa simula ng pagkalat ay solid.
  • Ang katangian ng gilid sa katapusan ng pagkalat ay pointillism (dotted).

Kung border-inline-style Ang katangian ay may isang halaga:

border-inline-style: dotted;
  • Ang mga katangian ng gilid sa simula at katapusan ng pagkalat ng CSS ay pointillism (dotted).

CSS na border-inline-style Ang katangian ay may kaugnayan sa border-bottom-style、border-left-style、border-right-style at border-top-style Ang mga katangian ay napakatulad, ngunit border-inline-style Ang katangian ay umaasa sa direksyon ng pagkalat.

Babala:ang mga CSS na katangian na may kaugnayan writing-mode、text-orientation at direction Tinukoy ang direksyon ng pagkalat. Ito ay nakakaapekto sa simula at katapusan ng linya, at border-inline-style 属性的结果。Para ang pahina sa Ingles, ang direksyon ng pagkalat ay mula sa kaliwa papunta sa kanan, at ang direksyon ng bloke ay mula taas papunta sa ilalim.

實例

例子 1

設置行內方向上的邊框樣式：

#example1 {
  border-inline-style: solid;
}
#example2 {
  border-inline-style: dashed dotted;
}

親自試一試

例子 2：結合 writing-mode 屬性

行內方向開始和結束處的邊框位置受 writing-mode 屬性影響：

div {
  writing-mode: vertical-rl;
  border-inline-style: dotted;
}

親自試一試

例子 3：結合 direction 屬性

行內方向開始和結束處的邊框位置受 direction 屬性影響：

div {
  direction: rtl;
  border-inline-style: solid dotted;
}

親自試一試

CSS 語法

border-inline-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;

屬性值

值 描述
none 默認值。指定無邊框。
hidden 與 none 相同，但在表格元素的邊框衝突解決中有所不同。
dotted 指定點線邊框。
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.borderInlineStyle="dotted"

瀏覽器支持

表格中的數字表示首個完全支持該屬性的瀏覽器版本。

Chrome Edge Firefox Safari Opera
87.0 87.0 66.0 14.1 73.0

相關頁面

教程：CSS 边框

參考：CSS border 属性

參考：CSS border-inline 属性

參考：CSS border-inline-style 属性

參考：CSS border-bottom-style 属性

參考：CSS border-left-style 属性

參考：CSS border-right-style 属性

參考：CSS border-top-style 属性

參考：CSS direction 属性

參考：CSS text-orientation 属性

參考：CSS writing-mode 属性