CSS border-top 属性值说明
| 值 | 说明 |
|---|---|
| border-top-width | 设置图元的顶部边框宽度。默认值为“medium”。必需值。 |
| border-top-style | 设置图元顶部边框的线样式。默认值为“none”必需值。 |
| border-top-color | 设置元素的顶部边框的颜色。默认值是文本的当前颜色。 |
| initial | 将属性设置为其默认值。 |
| inherit | 从父元素继承属性。 |
CSS border-top 属性设置元素上边框的宽度、颜色和线条样式。
它是用于指定 border-top-width、border-top-style 和 border-top-color 值的速记属性。
速记属性的这三个值可以按任意顺序指定，可以省略其中的一两个。
如果没有指定颜色，则该值将从颜色属性中获取。
如果未定义颜色属性，则默认为黑色。
如果没有指定宽度，它将采用元素的中等大小。
| 初始值 | medium none 当前颜色 |
|---|---|
| 应用于 | 所有元素。它也适用于::first-letter。 |
| 继承 | 不可继承 |
| 可动画的 | 边框的颜色和宽度可以设置动画。 |
| 版本 | CSS1 |
| DOM 语法 | object.style.borderTop="1px solid black"; |
语法
border-top: border-width border-style border-color | initial | inherit;
边框顶部属性border-top的示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
border-top: 3px solid #1c87c9;
padding: 10px;
}
</style>
</head>
<body>
<h2>Border-top 示例</h2>
<div> Border-top简单示例</div>
</body>
</html>
应用于不同元素的 border-top 属性示例：
<!DOCTYPE html>
<html>
<head>
<style>
h1,
p,
div {
padding: 10px;
}
h1 {
border-top: 5px solid #8ebf42;
}
p {
border-top: 4px dotted #1c87c9;
}
div {
border-top: thick double #666;
}
</style>
</head>
<body>
<h1>带有纯绿色顶部边框的标题</h1>
<p>顶部带有蓝色虚线边框的标题。</p>
<div>具有厚双顶边框的 div 元素。</div>
</body>
</html>
我们可以使用 <div> 元素创建一个框并为框设置背景颜色并定义顶部边框。
使用 border-top 属性创建带有脊状边框的框的示例：
<!DOCTYPE html>
<html>
<head>
<style>
div {
border-top: 20px ridge #8ebf42;
background-color: #ccc;
height: 100px;
width: 200px;
font-weight: bold;
text-align: center;
padding: 3px;
}
</style>
</head>
<body>
<div>
<p>这个盒子的顶部有一个脊边</p>
</div>
</body>
</html>
日期：2020-06-02 22:14:20 来源：oir作者：oir