CSS 边框属性border是一个速记属性，它为元素的所有四个边设置边框宽度、边框样式和边框颜色的值。
不允许使用负值。
当我们想让所有四个边都相同时，将使用边框速记属性。
我们可以借助 border-width、border-style 和 border-color 属性更改边框，这些属性可以为每一边设置不同的值。
如果未定义该值，则边框不可见。
| 初始值 | medium none 当前颜色 |
|---|---|
| 应用于 | 所有元素。它也适用于::first-letter。 |
| 继承 | 无效 |
| 可动画的 | 边框的宽度、颜色和样式可以设置动画。 |
| 版本 | CSS1 |
| DOM 语法 | object.style.border= "5px solid red"; |
语法
border: border-width border-style border-color | initial | inherit;
边框属性示例：
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
p {
border: thick solid #8ebf42;
padding: 5px;
}
</style>
</head>
<body>
<h2>Border 属性示例</h2>
<p>将段落的边框设置为"thick solid green".</p>
</body>
</html>
再看一个例子，边框样式为虚线，宽度设置为3px，边框颜色为蓝色。
具有“虚线”值的边框属性示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
border: 3px dashed #1c87c9;
padding: 10px;
}
</style>
</head>
<body>
<h2>Border 属性示例</h2>
<p>将边框设置为"3px dashed blue".</p>
</body>
</html>
让我们看另一个应用了 3 个值的边框颜色示例。
第一个应用于顶部边框，第二个应用于左右，第三个应用于底部。
具有 3 个值的边框属性示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
border: 3px solid;
border-color: #1c87c9 #666 #8ebf42;
padding: 5px;
}
</style>
</head>
<body>
<h2>Border 属性示例</h2>
<div> border-color 属性设置了3个值</div>
</body>
</html>
边框样式属性示例：
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
p,
div {
padding: 5px;
}
.border1 {
border: 5px solid #ccc;
}
.border2 {
border: 5px dotted #1c87c9;
}
div {
border: thick double #8ebf42;
}
</style>
</head>
<body>
<h2>Border 属性示例</h2>
<p class="border1">带有纯灰色边框的段落。</p>
<p class="border2">带有蓝色虚线边框的段落。</p>
<div>带有粗双绿色边框的 div 元素。</div>
</body>
</html>
CSS border 属性值说明
| 值 | 说明 |
|---|---|
| border-width | 定义边框的宽度。默认值为“medium”。 |
| border-style | 定义边框的样式。默认值为“none”。 |
| border-color | 定义边框的颜色。默认值是元素的当前颜色。 |
| initial | 将属性设置为其默认值。 |
| inherit | 从父元素继承属性。 |
日期：2020-06-02 22:14:20 来源：oir作者：oir