border-top
试试看
与所有简写属性一样,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 。 |
继承 | 否 |
计算值 | 与简写属性的每个属性相同
|
动画类型 | 与简写属性的每个属性相同
|
正式语法
示例
应用顶部边框
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 表格仅在浏览器中加载