边界块结束 | border-block-end

这是一项实验技术

由于该技术的规格不稳定，请查看兼容性表以了解各种浏览器的使用情况。还请注意，随着规范的变化，实验技术的语法和行为在未来版本的浏览器中可能会发生变化。

border-block-end CSS 属性是用于在样式表中的单一位置设置各个逻辑块的端边界的属性值的速记属性。

border-block-end: 1px;
border-block-end: 2px dotted;
border-block-end: medium dashed blue;

border-block-end可用于对一个或多个的设置的值border-block-end-width，border-block-end-style和border-block-end-color。它映射的物理边界取决于元素的写入模式，方向性和文本方向。它对应于border-top，border-right，border-bottom，或border-left属性根据为定义的值writing-mode，direction和text-orientation。

相关属性是border-block-start，border-inline-start和border-inline-end，它们定义了元素的其他边界。

初始值	作为简写的每个属性：border-width：作为简写的每个属性：border-top-width：中等border-right-width：中等border-bottom-width：中等border-left-width：中等border-style：作为速记的每个属性：border-top-style：none border-right-style：none border-bottom-style：none border-left-style：none color：从一个浏览器到另一个浏览器
适用于	所有元素
继承	无
媒体	视觉
计算值	作为简写的每个属性：border-width：作为简写的每个属性：border-bottom-width：绝对长度，如果border-bottom-style为none或hidden border-left-width则为0：绝对长度，如果border-left-style是none或hidden border，则为0 border-right-width：绝对长度，如果border-right-style为none或hidden，则为0 border-top-width：绝对长度，如果是border-top，则为0 -style是none或hidden border-style：作为速记的每个属性：border-bottom-style：指定的border-left-style：指定的border-right-style：指定的border-top-style：as指定的颜色：如果该值是半透明的，则计算的值将是rgba（）对应的值。如果不是，它将是rgb（）对应的一个。透明关键字映射到rgba（0,0,0,0）。
动画类型	离散的
规范的顺序	形式语法定义的独特非模糊顺序

border-width：作为速记的每个属性：

-  [`border-top-width`](border-top-width): `medium` 
-  [`border-right-width`](border-right-width): `medium` 
-  [`border-bottom-width`](border-bottom-width): `medium` 
-  [`border-left-width`](border-left-width): `medium`

border-style：作为速记的每个属性：

-  [`border-top-style`](border-top-style): `none` 
-  [`border-right-style`](border-right-style): `none` 
-  [`border-bottom-style`](border-bottom-style): `none` 
-  [`border-left-style`](border-left-style): `none`

color：因浏览器而异

Applies to all elements   [Inherited](inheritance) no   Media visual   [Computed value](computed_value) as each of the properties of the shorthand:

border-width：作为速记的每个属性：

-  [`border-bottom-width`](border-bottom-width): the absolute length or `0` if [`border-bottom-style`](border-bottom-style) is `none` or `hidden` 
-  [`border-left-width`](border-left-width): the absolute length or `0` if [`border-left-style`](border-left-style) is `none` or `hidden` 
-  [`border-right-width`](border-right-width): the absolute length or `0` if [`border-right-style`](border-right-style) is `none` or `hidden` 
-  [`border-top-width`](border-top-width): the absolute length or `0` if [`border-top-style`](border-top-style) is `none` or `hidden`

border-style：作为速记的每个属性：

-  [`border-bottom-style`](border-bottom-style): as specified
-  [`border-left-style`](border-left-style): as specified
-  [`border-right-style`](border-right-style): as specified
-  [`border-top-style`](border-top-style): as specified

color：如果该值是半透明的，则计算出的值将是rgba()相应的值。如果不是，那将是rgb()相应的一个。该transparent关键字映射到rgba(0,0,0,0)。

Animation type discrete   Canonical order the unique non-ambiguous order defined by the formal grammar

语法

值

border-block-end与一个或多个以下的规定，以任何顺序：

<'border-width'>边框的宽度。看border-width。<'border-style'>边框的线条样式。看border-style。<'color'>边框的颜色。看color。

形式语法

<'border-width'> || <'border-style'> || <'color'>where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )<rgba()> = rgba( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )<hsl()> = hsl( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )<hsla()> = hsla( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )where <alpha-value> = <number> | <percentage><hue> = <number> | <angle>

例子

HTML 内容

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

CSS 内容

div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-rl;
  border-block-end: 5px dashed blue;
}

规范

Specification	Status	Comment
CSS Logical Properties Level 1The definition of 'border-block-end' in that specification.	Editor's Draft	Initial definition

浏览器兼容性

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	No support	41.0 (41.0)1	No support	No support	No support

Feature	Android	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	No support	41.0 (41.0)1	No support	No support	No support

本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com

最后更新于：2017-12-18