border-top-color
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
border-top-color 属性用以设置某元素顶部 border的颜色。通常，用border-color 或 border-top 设置该颜色更为便捷可取。
尝试一下
border-top-color: red;
border-top-color: #32a1ce;
border-top-color: rgb(170, 50, 220, 0.6);
border-top-color: hsl(60, 90%, 50%, 0.8);
border-top-color: transparent;
<section class="default-example" id="default-example">
<div class="transition-all" id="example-element">
This is a box with a border around it.
</div>
</section>
#example-element {
background-color: #eee;
color: #000;
border: 0.75em solid;
padding: 0.75em;
width: 80%;
height: 100px;
}
语法
css
/* <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;
border-top-color 属性的值为单值。
值
<color>-
上边框的颜色。
形式语法
border-top-color =
<color> |
<image-1D>
<image-1D> =
<stripes()>
<stripes()> =
stripes( <color-stripe># )
<color-stripe> =
<color> &&
[ <length-percentage> | <flex> ]?
<length-percentage> =
<length> |
<percentage>
示例
一个简单的带边框容器
HTML
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
css
.mybox {
border: solid 0.3em gold;
border-top-color: red;
width: auto;
}
.redtext {
color: red;
}
结果
规范
| Specification |
|---|
| CSS Backgrounds and Borders Module Level 3 # border-color |
浏览器兼容性
Loading…
参见
- The border-related CSS shorthand properties:
border,border-top, andborder-color. - The color-related CSS properties for the other borders:
border-right-color,border-bottom-color, andborder-left-color. - The other border-related CSS properties applying to the same border:
border-top-styleandborder-top-width.