border-block-color

在此页

句法
形式定义
形式句法
范例
规范
浏览器兼容性
另请参阅
相关话题

border-block-color CSS property defines the color of the logical block borders of an element, which maps to a physical border color depending on the element's writing mode, directionality, and text orientation. It corresponds to the border-top-color and border-bottom-color ，或 border-right-color and border-left-color property depending on the values defined for writing-mode , direction ，和 text-orientation .

border-block-color: yellow;
border-block-color: #F5F6F7;

The border color in the other dimension can be set with border-inline-color which sets border-inline-start-color ，和 border-inline-end-color .

句法

值

<'color'>: The color of the border. See color .

形式定义

初始值	`currentcolor`
适用于	所有元素
继承	no
计算值	computed color
动画类型	discrete

形式句法

<'border-top-color'>{1,2}

范例

Border with vertical text

HTML

<div>
  <p class="exampleText">Example text</p>
</div>

CSS

div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}
.exampleText {
  writing-mode: vertical-lr;
  border: 10px solid blue;
  border-block-color: red;
}

结果

规范

规范	状态	注释
CSS Logical Properties and Values Level 1 The definition of 'border-block-color' in that specification.	编者草案	初始定义

浏览器兼容性

The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`border-block-color`	Chrome 完整支持 69 Disabled 完整支持 69 Disabled Disabled From version 69: this feature is behind the `Experimental Web Platform Features` preference (needs to be set to `enabled` ). To change preferences in Chrome, visit chrome://flags.	Edge 完整支持 79 Disabled 完整支持 79 Disabled Disabled From version 79: this feature is behind the `Experimental Web Platform Features` preference (needs to be set to `enabled` ).	Firefox 完整支持 66	IE 不支持 No	Opera 完整支持 56 Disabled 完整支持 56 Disabled Disabled From version 56: this feature is behind the `Experimental Web Platform Features` preference (needs to be set to `enabled` ).	Safari 不支持 No	WebView Android 不支持 No	Chrome Android 完整支持 69 Disabled 完整支持 69 Disabled Disabled From version 69: this feature is behind the `Experimental Web Platform Features` preference (needs to be set to `enabled` ). To change preferences in Chrome, visit chrome://flags.	Firefox Android 完整支持 66	Opera Android 完整支持 48 Disabled 完整支持 48 Disabled Disabled From version 48: this feature is behind the `Experimental Web Platform Features` preference (needs to be set to `enabled` ).	Safari iOS 不支持 No	Samsung Internet Android 不支持 No

图例

完整支持
不支持
用户必须明确启用此特征。

另请参阅

This property maps to the physical border properties: border-top-color , border-right-color , border-bottom-color ，或 border-left-color .
writing-mode , direction , text-orientation + bug 1297097

元数据

最后修改： Oct 20, 2020

在此页

句法

值