上查看所有课程
CSS border 简写属性设置元素的边框。它定义了元素边框的粗细、样式和颜色。例如，
h1 {
border: 4px solid blue;
}浏览器输出
在这里，border 属性为 h1 元素添加了一个 4px 宽的 实线 蓝色 边框。
CSS border 语法
border 简写属性的语法如下，
border: border-width border-style border-color;这里，
- border-width: 以长度单位或关键词指定边框的宽度
- border-style: 指定边框的样式，例如
solid、dashed、dotted等 - border-color: 指定边框的颜色，例如
red、RGB(0, 255, 0)等
注意：border 简写属性至少需要 border-style 值才能工作。
CSS border 示例
让我们来看一个 border 简写属性的例子，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS border</title>
</head>
<body>
<p class="border-solid">border: 2px solid orange;</p>
<p class="border-dashed">border: 4px dashed green;</p>
<p class="border-dotted">border: 2px dotted black;</p>
</body>
</html>/* styles all paragraph */
p {
padding: 4px;
}
p.border-solid {
/* border-width | border-style | border-color */
border: 2px solid orange;
}
p.border-dashed {
/* border-width | border-style | border-color */
border: 4px dashed green;
}
p.border-dotted {
/* border-width | border-style | border-color */
border: 2px dotted black;
}浏览器输出
CSS border 组成属性
border 是一个简写属性，用于在单个声明中指定 border-style、border-width 和 border-color 属性。
让我们看一个例子，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS border</title>
</head>
<body>
<h1>CSS border Property</h1>
</body>
</html>h1 {
/* border-width border-style border-color */
border: 4px solid blue;
padding: 8px;
}浏览器输出
在上面的例子中：
border: 4px solid blue;等同于：
border-top: 4px solid blue;
border-right: 4px solid blue;
border-bottom: 4px solid blue;
border-left: 4px solid orange;