CSS border-inline-end-style 属性
Paglalarawan at Paggamit
border-inline-end-style
Property ay nagtatakda ng estilo ng border sa dulo ng direksyon ng inlayo ng elemento.
CSS ng border-inline-end-style
Atribute ay may katugma sa border-bottom-style
、border-left-style
、border-right-style
和 border-top-style
Atribute ay tunay na katugma, ngunit border-inline-end-style
Atribute ay magiging katugma sa direksyon ng inlayo.
注意:相關的 CSS 屬性 writing-mode
、text-orientation
和 direction
定義了行內方向。這會影響一行的起始和結束位置,以及 border-inline-end-style
屬性的結果。對於英文頁面,行內方向是從左到右,塊方向是向下。
實例
例子 1
為行內方向末端的邊框設置樣式:
div { border-inline-end-style: dotted; }
例子 2:結合 writing-mode 屬性
行內方向末端邊框的位置受 writing-mode
屬性影響:
div { writing-mode: vertical-rl; border-inline-end-style: dotted; }
例子 3:結合 direction 屬性
行內方向起始和末端邊框的位置受 direction
屬性影響:
div { direction: rtl; border-inline-end-style: dotted; }
CSS 語法
border-inline-end-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.borderInlineEndStyle="dotted" |
瀏覽器支持
表格中的數字表示首個完全支持該屬性的瀏覽器版本。
Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|
69.0 | 79.0 | 41.0 | 12.1 | 56.0 |
相關頁面
教程:CSS 边框
參考:CSS border-inline-end-style 属性