此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。
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> <div> 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> <p> This is a box with a border around it. Note which side of the box is <span>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 |
浏览器兼容性
参见
- 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.