CSS 如何为HTML div标签设置边框

在本文中，我们将介绍如何使用CSS为HTML div标签设置边框。CSS（层叠样式表）是一种用于描述HTML文档如何呈现的样式语言，通过使用CSS，我们可以更好地控制和美化网页元素的外观。

阅读更多：CSS 教程

CSS 边框属性

CSS提供了一系列属性来设置HTML元素的边框样式，包括边框的宽度、颜色和样式。以下是常用的CSS边框属性：

border-width: 设置边框的宽度，可以使用具体的像素值、百分比或预定义的值（thin、medium、thick）。
border-color: 设置边框的颜色，可以使用颜色名称、十六进制值或RGB值。
border-style: 设置边框的样式，常见的值有solid（实线）、dotted（点线）、dashed（虚线）等。

示例：设置HTML div标签边框

以下是一些示例，演示如何使用CSS为HTML div标签设置边框：

<!DOCTYPE html>
<html>
<head>
<style>
/* 设置div的宽度、高度和背景颜色 */
div {
  width: 200px;
  height: 100px;
  background-color: lightgray;
}

/* 设置div的边框宽度、颜色和样式 */
#div1 {
  border-width: 1px;
  border-color: red;
  border-style: solid;
}

#div2 {
  border-width: 2px;
  border-color: green;
  border-style: dotted;
}

#div3 {
  border-width: 3px;
  border-color: blue;
  border-style: dashed;
}
</style>
</head>
<body>

<!-- 示例div标签 -->
<div id="div1">实线边框</div>
<div id="div2">点线边框</div>
<div id="div3">虚线边框</div>

</body>
</html>

在上述示例中，我们首先定义了一个CSS样式规则，为div元素设置了宽度、高度和背景颜色。然后，我们通过选择器（div1、div2和div3）为不同的div元素设置了不同的边框样式。