1. 介绍
CSS是前端开发中的重要一环，它可以用来美化页面元素，提高页面的用户体验。其中边框是CSS中的一个重要元素，可以用来给页面元素增加框线或线框。本文将会介绍19个CSS唯美的边框样式，让你的项目更具吸引力。
2. 基本边框样式
2.1 线条边框
线条边框是最基本的边框样式之一，可以使用border属性来定义。下面是一个例子：
.box{
border:1px solid #ccc;
}
在上述样式中，box元素的边框宽度是1像素，颜色是灰色。
2.2 虚线边框
虚线边框可以给页面元素增添一份轻盈感。可以通过border-style属性设置为dashed和dotted。
.box{
border:1px dashed #ccc;
}
在上述样式中，box元素的边框是1像素的虚线，颜色是灰色。
2.3 圆角边框
圆角边框可以使页面元素更加柔和。可以通过border-radius属性来设置半径。
.box{
border:1px solid #ccc;
border-radius:5px;
}
在上述样式中，box元素的边框是1像素的实线，颜色是灰色，边框角半径是5像素。
2.4 边框阴影
边框阴影可以给页面元素增加一份深邃感。可以通过box-shadow属性来设置。
.box{
border:1px solid #ccc;
box-shadow:2px 2px 5px #000;
}
在上述样式中，box元素的边框是1像素的实线，颜色是灰色，在box元素的下面和右边增加了2像素宽的阴影，阴影颜色是黑色。
3. 特殊边框样式
3.1 图片边框
图片边框可以给页面元素增加一份浪漫感。可以使用border-image属性来设置。
.box{
border:10px solid transparent;
border-image:url(border.png) 30 round;
}
在上述样式中，box元素的边框是10像素的空线，通过border-image属性设置了一个30像素的图片边框，border.png是图片的路径，round是拉伸方式（可以设置为stretch）。
3.2 斜线边框
斜线边框可以给页面元素增加一份生动感。可以使用linear-gradient()函数来设置。
.box{
position:relative;
border-top:4px solid #667db6;
border-bottom:4px solid #5991ce;
background:
linear-gradient(45deg, #5991ce 49%, transparent 49%) 100% 0,
linear-gradient(-45deg, #5991ce 49%, transparent 49%) 100% 100%;
background-size:30px 30px;
background-repeat:no-repeat;
}
在上述样式中，box元素的边框是4像素的实线，颜色是蓝色，通过background属性和linear-gradient()函数设置了一组45度和-45度的斜线，颜色是蓝色和透明，背景大小是30像素*30像素，不重复。
3.3 波浪边框
波浪边框可以给页面元素增加一份自然感。可以使用radial-gradient()函数来设置。
.box{
position:absolute;
top:-4px;
bottom:-4px;
left:-4px;
right:-4px;
border-radius:50%;
border:6px solid #667db6;
background:radial-gradient(circle at 30px 30px, #5991ce 30px, transparent 31px);
}
在上述样式中，box元素的边框是6像素的实线，颜色是蓝色，边框角半径是50%，通过background属性和radial-gradient()函数设置了一个以(30,30)像素为圆心，颜色是蓝色和透明的圆形背景。
4. 小结
本文介绍了19个CSS唯美的边框样式，其中包括了基本边框样式和特殊边框样式。通过这些样式，可以让你的项目更加有吸引力。