导航分类

CSS border-block 属性

主题

定义和用法

border-block是 CSS 中的一个逻辑属性，用于同时设置块方向（block-direction）边框的样式、宽度和颜色。

border-block依赖于writing-mode和direction，适用于多语言布局（如中文、阿拉伯语、日语等）。

默认值：	medium none color
继承性：	否
可动画性：	支持。请参阅：可动画属性。
版本：	CSS3
JavaScript 语法：	object.style.borderBlock="dashed hotpink 10px"

接下来通过多个实例演示border-block:属性的用法，来深化您对border-block:属性的理解。

为块方向上不同元素的边框设置样式、颜色和宽度：

实例代码运行代码

复制

h1 {
    border-block: 5px solid red;
}

h2 {
    border-block: 4px dotted blue;
}

div {
    border-block: double;
}

块方向上起始和结束边框的位置受 writing-mode 属性影响：

实例代码运行代码

复制

div {
    writing-mode: vertical-rl;
    border-block: hotpink dashed 8px;
}

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

表中的数字指定了完全支持border-block属性的第一个浏览器版本。