边框属性颜色 | border-top-color

border-top-color

border-top-colorCSS属性设置元素的顶部的颜色border。请注意，在许多情况下，简化的CSS属性border-color或border-top更方便，更可取。

/* <color> values */
border-top-color: red;
border-top-color: #ffbb00;
border-top-color: rgb(255, 0, 0
border-top-color: hsla(100%, 50%, 25%, 0.75
border-top-color: currentColor;
border-top-color: transparent;

/* Global values */
border-top-color: inherit;
border-top-color: initial;
border-top-color: unset;

初始值	currentcolor
适用元素	all elements. It also applies to ::first-letter.
是否是继承属性	no
适用媒体	visual
计算值	computed color
Animation type	a color
正规顺序	the unique non-ambiguous order defined by the formal grammar

语法

该border-top-color属性被指定为单个值。

值

<color>顶部边框的颜色。

正式语法

<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>

示例

带有边界的简单div

HTML

<div class="mybox">
  <p>This is a box with a border around it.
     Note which side of the box is
     <span class="redtext">red</span>.</p>
</div>

CSS

.mybox {
  border: solid 0.3em gold;
  border-top-color: red;
  width: auto;
}

.redtext {
  color: red;
}

结果

规范

Specification	Status	Comment
CSS Backgrounds and Borders Module Level 3The definition of 'border-top-color' in that specification.	Candidate Recommendation	No significant changes, though the transparent keyword, now included in <color> which has been extended, has been formally removed.
CSS Level 2 (Revision 1)The definition of 'border-top-color' in that specification.	Recommendation	Initial definition

浏览器兼容性

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	1.0	(Yes)	1.0 (1.7 or earlier)1	4.0	3.5	1.0 (85)

Feature	Android	Edge	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	1.0	(Yes)	1.0 (1.0)1	6.5	11	1.0

Firefox等基于壁虎的浏览器也支持-moz-border-top-colors将顶部边框设置为多种颜色的非标准CSS属性。

另见

边界相关的简写属性：border，border-top，和border-color。

对于其他边框颜色相关CSS属性：border-right-color，border-bottom-color，和border-left-color。

应用于同一边框的其他与边界相关的CSS属性：border-top-style和border-top-width。