1. CSS设置div边框样式
1.1 CSS border属性
在CSS中，通过border属性可以设置元素的边框，该属性有三个属性值组成：border-width（边框宽度）、border-style（边框样式）和border-color（边框颜色），其中border-style是必须指定的。
div{
border-style: solid;
border-width: 1px;
border-color: black;
}
上面的代码设置了一个1像素宽的黑色实线边框，可以在div元素内添加其他内容进行测试效果。
border-style属性可以设置为以下值：
none：不显示边框
solid：实线边框
dotted：点线边框
dashed：虚线边框
double：双实线边框
groove：3D凹槽边框
ridge：3D凸槽边框
inset：3D内嵌边框
outset：3D外嵌边框
可以通过border-width属性设置边框的宽度，如下所示：
div{
border-style: solid;
border-width: 2px;
border-color: black;
}
上面的代码设置了一个2像素宽的黑色实线边框。
1.2 CSS边框简写属性
在实际开发中，可以使用CSS的边框简写属性border，它可以将上面三个属性值写在一个语句中，如下所示：
div{
border: 2px solid black;
}
上面的代码与之前的代码效果相同，都设置了一个2像素宽的黑色实线边框。
1.3 CSS圆角边框
在CSS3中，新增了一个border-radius属性可以设置圆角边框。该属性接受一个或多个长度值，用逗号隔开，指定四个方向的圆角程度。如果只指定了一个值，则四个方向的圆角程度相同；如果指定了两个值，则第一个值指定水平方向（左、右两侧），第二个值指定垂直方向（上、下两侧）。如果指定了四个值，则按照依次指定的顺序分别指定左上角、右上角、右下角和左下角的圆角程度。
div{
border: 2px solid black;
border-radius: 10px;
}
上面的代码设置了一个2像素宽、10像素圆角的黑色实线边框。
1.4 CSS带阴影边框
在CSS3中，通过box-shadow属性可以为元素添加阴影效果，结合边框样式，可以创建出更为复杂的边框效果。
div{
border: 2px solid black;
border-radius: 10px;
box-shadow: 2px 2px 2px gray;
}
上面的代码设置了一个2像素宽、10像素圆角的黑色实线边框，并为它添加了一个淡灰色的阴影效果。
1.5 CSS图片边框
除了颜色和阴影效果以外，我们也可以使用图片来作为边框背景，使样式更为丰富。
div{
border: none;
border-radius: 10px;
padding: 20px;
background: url(border.jpg) repeat;
}
上面的代码使用了一张名为border.jpg的图片做为div元素的背景，使得div元素看起来像是有一个图片边框。
2. 总结
通过对CSS边框样式的介绍，我们可以发现CSS为元素边框提供了非常丰富的设置方式，包括颜色、样式、宽度、圆角、阴影和背景图片等特效。掌握这些技巧可以使我们在网页设计中更加得心应手，让网站看起来更加精致美观。