首页
前端开发
后端开发
数据库
数据分析
开发工具
测验/考试
代码笔记
🎁 作为国产 AI 大模型的佼佼者，全面、实用的 DeepSeek 教程 现已正式上线了点击参与
导航分类
CSS border-block 属性CSS border-block-end 属性
主题
  • 默认模式
  • 浅蓝色模式
  • 淡绿色模式
  • 深夜模式

定义和用法

border-block-color是一个 CSS 逻辑属性，用于设置元素在块方向（block direction）上的边框颜色。

border-block-color属性是 CSS 逻辑属性和值规范的一部分，旨在根据文档的书写模式（writing-mode）自动适应不同的文本流向。

默认值： 当前元素颜色
继承性： 否
可动画性： 支持。请参阅：可动画属性。
版本： CSS3
JavaScript 语法： object.style.borderBlockColor="pink"

常用的实例

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

1. 为块方向上的边框设置颜色

实例代码 运行代码
复制
.example1 {
    border-block-color: pink;
    background-color: #fff0f5;
}

.example2 {
    border-block-color: pink lightblue;
    background-color: #f0f8ff;
}

2. 块方向上边框颜色的起点和终点位置受 writing-mode 属性的影响

实例代码 运行代码
复制
.example1 {
    writing-mode: vertical-rl;
    border-block-color: hotpink dashed 8px;
}

CSS 语法

border-block-color: color|transparent|initial|inherit;

属性值

值 描述
color 指定边框颜色（默认颜色是元素的当前颜色）。
transparent 指定边框颜色应为透明。
initial 将此属性设置为其默认值。参阅 initial。
inherit 从其父元素继承此属性。参阅 inherit。

浏览器支持

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

Chrome 浏览器 EDGE 浏览器 Firefox 浏览器 Safari 浏览器 Opera 浏览器
Chrome IE / Edge Firefox Safari Opera
87.0 87.0 66.0 14.1 73.0

相关页面

CSS 教程：CSS 边框

CSS 参考手册：CSS 颜色值

CSS 参考手册：CSS border-block-color 属性

CSS 参考手册：CSS border-block-style 属性

CSS 参考手册：CSS border-block-width 属性

评论区 0
发表评论
教程介绍
CSS 参考手册全面涵盖选择器、盒模型，文本属性等，助您快速检索 CSS 使用方法。
45 章节
18 阅读
0 评论
教程目录

CSS 参考手册

CSS 属性（字母排序） CSS 属性（功能排序） CSS 浏览器支持 CSS 选择器 CSS 函数 CSS 可动画性 CSS Web安全字体 CSS 单位 CSS 颜色 CSS 颜色值

CSS 属性

align-content align-items align-self all animation animation-delay animation-direction animation-duration animation-fill-mode animation-iteration-count animation-name animation-play-state animation-timing-function aspect-ratio backdrop-filter backface-visibility background background-attachment background-blend-mode background-clip background-color background-image background-origin background-position background-position-x background-position-y background-repeat background-size block-size border border-block border-block-color border-block-end border-block-end-color border-block-end-style