一、使用CSS border属性添加边框
border属性可以在CSS中用来添加边框，该属性包含三个值：
border: [border-width] [border-style] [border-color];
其中，border-width指定边框的宽度，border-style指定边框的样式，border-color指定边框的颜色。例如：
div {
border: 1px solid black;
}
以上代码将为所有的
如果想要添加不同样式或颜色的边框，可以改变border-style和border-color的值。例如：
div {
border: 2px dotted red;
}
以上代码将为所有的
需要注意的是，如果要为
<div class="wrapper">
<div class="content">
...
</div>
</div>
.wrapper {
border: 1px solid black;
}
以上代码将为包含内容的
二、使用CSS outline属性添加边框
outline属性可以在CSS中用来添加轮廓框，该属性包含三个值：
outline: [outline-width] [outline-style] [outline-color];
和border属性类似，outline-width指定边框的宽度，outline-style指定边框的样式，outline-color指定边框的颜色。例如：
div {
outline: 2px solid blue;
}
以上代码将为所有的
需要注意的是，outline属性不会影响到文档的布局，因此即使在子元素和父元素重合的情况下，outline属性仍然会展示。
三、使用CSS box-shadow属性添加边框
box-shadow属性可以在CSS中用来为元素添加阴影，它可以模拟出边框的效果。该属性包含三到四个值：
box-shadow: [horizontal-offset] [vertical-offset] [blur-radius] [spread-radius] [color];
其中，horizontal-offset和vertical-offset分别指定阴影的水平位移和垂直位移，blur-radius指定阴影的模糊程度，spread-radius指定阴影的范围，color指定阴影的颜色。例如：
div {
box-shadow: 0 0 0 2px black;
}
以上代码将为所有的
需要注意的是，box-shadow属性的第一个值和第二个值可以负数，从而模拟出某侧边框的效果。例如：
div {
box-shadow: -2px 0 0 0 blue;
}
以上代码将为所有的
四、使用CSS伪类元素添加边框
如果不想改变
div::before {
content: "";
display: block;
width: 100%;
height: 2px;
background-color: black;
margin-bottom: 10px;
}
div::after {
content: "";
display: block;
width: 100%;
height: 2px;
background-color: black;
margin-top: 10px;
}
以上代码将为每个
五、使用CSS border-image属性添加边框
border-image属性可以在CSS中用来为边框添加背景图片，它可以模拟出一些有趣的边框效果。该属性包含以下值：
border-image: [border-image-source] [border-image-slice] [border-image-width] [border-image-outset] [border-image-repeat];
其中，border-image-source指定边框的图片，border-image-slice指定图片的裁切方式，border-image-width指定图片的宽度，border-image-outset指定图片的外延范围，border-image-repeat指定图片的平铺方式。例如：
div {
border-image: url(border-image.png) 30 30 30 30 repeat;
}
以上代码将为所有的
border-image.png的边框，图片宽度为30像素，平铺方式为重复，外延范围为30像素。
需要注意的是，border-image属性兼容性较差，请谨慎使用。
- 文章目录
