border-top

**border-top** 简写 CSS 属性设置元素顶部边框的所有属性。

试试看

与所有简写属性一样,border-top始终设置其可以设置的所有属性的值,即使它们未指定。它将未指定的属性设置为其默认值。请考虑以下代码

css
border-top-style: dotted;
border-top: thick green;

它实际上与以下代码相同

css
border-top-style: dotted;
border-top: none thick green;

border-top 之前给出的 border-top-style 的值将被忽略。由于 border-top-style 的默认值为 none,因此不指定 border-style 部分会导致没有边框。

构成属性

此属性是以下 CSS 属性的简写

语法

css
border-top: 1px;
border-top: 2px dotted;
border-top: medium dashed green;

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

简写属性的三个值可以按任意顺序指定,并且可以省略其中一个或两个。

正式定义

初始值与简写属性的每个属性相同
应用于所有元素。它也适用于 ::first-letter
继承
计算值与简写属性的每个属性相同
动画类型与简写属性的每个属性相同

正式语法

border-top = 
<line-width> ||
<line-style> ||
<color>

<line-width> =
<length [0,∞]> |
thin |
medium |
thick

<line-style> =
none |
hidden |
dotted |
dashed |
solid |
double |
groove |
ridge |
inset |
outset

示例

应用顶部边框

HTML

html
<div>This box has a border on the top side.</div>

CSS

css
div {
  border-top: 4px dashed blue;
  background-color: gold;
  height: 100px;
  width: 100px;
  font-weight: bold;
  text-align: center;
}

结果

规范

规范
CSS 背景和边框模块第 3 级
# border-shorthands

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅