CSS border-block-start ιδιότητα

Ορισμός και χρήση

border-block-start Η ιδιότητα είναι η συντομευμένη μορφή των παρακάτω ιδιοτήτων:

CSS border-block-start 属性与 border-bottomborder-leftborder-rightborder-top 属性非常相似,但 border-block-start 属性依赖于块方向。

注意:相关的 CSS 属性 writing-mode 定义了块方向。这会影响块的起始和结束位置,以及 border-block-start 属性的结果。对于英文页面,行内方向是从左到右,块方向是向下。

实例

例子 1

设置块方向起始处的边框宽度、颜色和样式:

div {
  border-block-start: 10px solid pink;
}

親自試試

例子 2:结合 writing-mode 属性

块方向起始处边框的位置受 writing-mode 屬性的影响:

div {
  writing-mode: vertical-rl;
  border-block-start: dotted blue;
}

親自試試

CSS 語法

border-block-start: border-block-start-width border-block-start-style border-block-start-color|initial|inherit;

屬性值

描述
border-block-start-width

指定元素在块方向起始处的边框宽度。

默認值为 medium。

border-block-start-style

指定元素在块方向起始处的边框样式。

默認值为 none。

χρώμα κορυφής block

指定元素在块方向起始处的边框颜色。

默認值为边框的当前颜色。

initial 將此屬性設定為其默認值。參閱 initial
inherit 從其父元素繼承此屬性。參閱 inherit

技術細節

默認值: medium none currentcolor
繼承性:
動畫製作: 支持。請參閱:動畫相關屬性
版本: CSS3
JavaScript 語法: object.style.borderBlockStart="pink dotted 5px"

瀏覽器支持

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

Chrome Edge Firefox Safari Opera
69.0 79.0 41.0 12.1 56.0

相關頁面

教學:CSS όρια

参雖:CSS border ιδιότητα

参雖:CSS border-block ιδιότητα

参雖:CSS border-block-color ιδιότητα

参雖:CSS border-block-start-color ιδιότητα

参雖:CSS border-bottom-color ιδιότητα

参雖:Η ιδιότητα border-left-color CSS

参雖:Η ιδιότητα border-right-color CSS

参雖:Η ιδιότητα border-top-color CSS

参雖:CSS μοτίβο γραφής ιδιότητα