CSS border-inline ιδιότητα
- Προηγούμενη σελίδα border-image-width
- Επόμενη σελίδα border-inline-color
Definition and usage
border-inline
The property is an abbreviation for the following properties:
If the value of color or width is omitted, the default value will be used.
CSS's border-inline
properties with border
The properties are very similar, but border-inline
属性依赖于行内方向。
注意:相关的 CSS 属性 writing-mode
、text-orientation
和 direction
定义了行内方向。这会影响一行的起始和结束位置,以及 border-inline
属性的效果。对于英文页面,行内方向是从左到右,块方向是向下。
实例
例子 1
为行内方向上的不同元素设置边框的样式、颜色和宽度:
h1 { border-inline: 5px solid red; } h2 { border-inline: 4px dotted blue; } div { border-inline: double; }
例子 2:结合 writing-mode 属性
行内方向上起始和结束位置的边框受 writing-mode
属性的影响:
div { writing-mode: vertical-rl; border-inline: hotpink dashed 8px; }
CSS 语法
border-inline: border-inline-width border-inline-style border-inline-color |initial|inherit;
属性值
值 | 描述 |
---|---|
border-inline-width |
指定行内方向上边框的宽度。 默认值为 "medium"。 |
border-inline-style |
指定行内方向上边框的样式。 默认值为 "none"。 |
border-inline-color |
指定行内方向上边框的颜色。 默认值为文本的颜色。 |
initial | 将此属性设置为其默认值。参阅 initial。 |
inherit | 从其父元素继承此属性。参阅 inherit。 |
技术细节
默认值: | medium none color |
---|---|
继承性: | 否 |
动画制作: | yes, see individual properties. Read about animatable |
版本: | CSS3 |
JavaScript 语法: | object.style.borderInline="dashed hotpink 10px" |
浏览器支持
表格中的数字表示首个完全支持该属性的浏览器版本。
Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|
87.0 | 87.0 | 66.0 | 14.1 | 73.0 |
相关页面
Εκμάθηση:CSS πύλη
Αναφορά:CSS border ιδιότητα
Αναφορά:CSS border-inline-color ιδιότητα
Αναφορά:Πρότυπο CSS border-inline-style
Αναφορά:Πρότυπο CSS border-inline-width
Αναφορά:CSS direction ιδιότητα
Αναφορά:CSS text-orientation ιδιότητα
Αναφορά:CSS writing-mode ιδιότητα
- Προηγούμενη σελίδα border-image-width
- Επόμενη σελίδα border-inline-color