CSS border-top-style 属性用于设置元素顶部边框的样式。
此属性指定为从可用于边框样式属性的关键字中选择的单个关键字。
border-style 属性用于为元素的所有四个边设置样式，但 border-top-style 只为顶部边框设置样式。
上边框的默认宽度为中等。
它可以通过使用 border-top-width 或者 border-width 属性进行更改。
并非所有浏览器都以相同的方式呈现样式。
Chrome 将点呈现为矩形点，而不是圆形点。
该规范没有指定点和破折号之间的间距量。
该规范没有定义不同样式的边框如何在角落中连接。
| Default Value | none |
|---|---|
| 应用于 | 所有元素。它也适用于::first-letter。 |
| 继承 | 不可继承 |
| 可动画的 | 不可动画 |
| 版本 | CSS1 |
| DOM 语法 | object.style.borderTopStyle=“dashed”； |
语法
border-top-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit;
border-top-style 属性示例：
<!DOCTYPE html>
<html>
<head>
<style>
h2,
p {
padding: 15px;
border: solid #666;
}
h2 {
border-top-style: dashed;
}
p {
border-top-style: dotted;
}
</style>
</head>
<body>
<h2>带有虚线边框顶部样式的标题。</h2>
<p>带有虚线边框顶部样式的段落。</p>
</body>
</html>
具有所有样式值的 border-top-style 属性示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background: #1c87c9;
font-size: 20px;
text-align: center;
}
main div {
display: flex;
align-items: center;
justify-content: center;
color: black;
padding-top: 30px;
padding-bottom: 30px;
width: 200px;
height: 100px;
margin: 15px;
font-weight: bold;
background-color: #c9c5c5;
border: 10px solid;
}
.flex-center {
display: flex;
justify-content: center;
}
/* border-top-style example classes */
.b1 {
border-top-style: hidden;
}
.b2 {
border-top-style: dotted;
}
.b3 {
border-top-style: dashed;
}
.b4 {
border-top-style: solid;
}
.b5 {
border-top-style: double;
}
.b6 {
border-top-style: groove;
}
.b7 {
border-top-style: ridge;
}
.b8 {
border-top-style: inset;
}
.b9 {
border-top-style: outset;
}
</style>
</head>
<body>
<h1>Border-top-style value examples</h1>
<main class="flex-center">
<div class="b1">
hidden
</div>
<div class="b2">
dotted
</div>
<div class="b3">
dashed
</div>
</main>
<main class="flex-center">
<div class="b4">
solid
</div>
<div class="b5">
double
</div>
<div class="b6">
groove
</div>
</main>
<main class="flex-center">
<div class="b7">
ridge
</div>
<div class="b8">
inset
</div>
<div class="b9">
outset
</div>
</main>
</body>
</html>
CSS border-top-style 属性值说明
| 值 | 说明 |
|---|---|
| none | 定义没有任何边框。默认值。 |
| hidden | 与“none”相同，只是在表元素的边界冲突解决中。 |
| dotted | 定义虚线边框。 |
| dashed | 定义虚线边框。 |
| double | 定义双边框。 |
| solid | 定义实体边框。 |
| groove | 定义三维凹槽边框。它的效果可以随边框颜色的值而改变。 |
| ridge | 定义三维脊状边界。它的效果可以随边框颜色的值而改变。 |
| inset | 定义三维插入边框。它的效果可以随边框颜色的值而改变。 |
| outset | 定义三维边界。它的效果可以随边框颜色的值而改变。 |
| initial | 将属性设置为其默认值。 |
| inherit | 从父元素继承属性。 |
日期：2020-06-02 22:14:20 来源：oir作者：oir