语法
border-style: none |hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial |inherit;
边框样式border-style属性示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
border-style: dotted;
padding: 5px;
}
</style>
</head>
<body>
<p>点状边框样式</p>
</body>
</html>
每边都有自己的值的边框样式属性示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
border-width: 4px;
border-style: double solid dashed dotted;
border-color: #1c87c9;
color: #8ebf42;
padding: 5px;
}
</style>
</head>
<body>
<p>每条边都有自己的值</p>
</body>
</html>
具有所有值的边框样式属性示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background: #eee;
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: 8px solid #1c87c9;
}
.flex-center {
display: flex;
justify-content: center;
}
/* border-style example classes */
.b1 {
border-style: hidden;
}
.b2 {
border-style: dotted;
}
.b3 {
border-style: dashed;
}
.b4 {
border-style: solid;
}
.b5 {
border-style: double;
}
.b6 {
border-style: groove;
}
.b7 {
border-style: ridge;
}
.b8 {
border-style: inset;
}
.b9 {
border-style: outset;
}
</style>
</head>
<body>
<h1>Border-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-style属性值说明
| 值 | 说明 |
|---|---|
| none | 将不显示边界。默认值。 |
| hidden | 与“none”相同，除了表元素的边界冲突解决。 |
| dotted | 边框指定为一系列点。 |
| dashed | 边框指定为一系列破折号。 |
| solid | 边框指定为实线。 |
| double | 边框指定为双实线。 |
| groove | 这是一个三维槽边界，给人的印象，边界是雕刻。山脊的对面。 |
| ridge | 指定三维脊状边界并提供拉伸外观的效果。槽的对面。 |
| inset | 这是一个三维效果，让人觉得元素似乎嵌入。与开始相反。 |
| outset | 这是一个三维效果，使印象中的元素似乎浮雕。与插图相反。 |
| initial | 将属性设置为其默认值。 |
| inherit | 从父元素继承属性。 |
CSS 边框样式属性设置元素边框的所有四个边的样式。
它是定义border-top-style、border-bottom-style、border-left-style、border-right-style的速记属性。
此属性采用一到四个值。
所以每一边都可以有自己的值。
border-style 的默认值为 none。
边框放在元素的背景之上。
我们还需要知道某些浏览器不支持某些样式。
通常，当不支持某种样式时，浏览器会将边框绘制为实心边框。
边框样式属性使用一、二、三或者四个值定义。
当定义一个值时，它将对所有四个边应用相同的样式。
定义两个值时，第一个样式适用于顶部和底部，第二个样式适用于左侧和右侧。
当指定三个值时，第一个样式适用于顶部，第二个样式适用于左右，第三个样式适用于底部。
当指定四个值时，样式适用于顶部、右侧、底部和左侧，就像顺时针顺序一样。
| 初始值 | none |
|---|---|
| 应用于 | 所有元素。它也适用于::first-letter。 |
| 继承 | 无效 |
| 可动画的 | 无效 |
| 版本 | CSS1 |
| DOM 语法 | object.style.borderStyle= "dotted double"; |
日期：2020-06-02 22:14:19 来源：oir作者：oir