CSS添加漂亮的边框样式

一、实线边框

实线边框是最基本的边框样式，可以通过CSS的border属性来设置，其中border-style属性控制边框样式，border-width属性控制边框宽度，border-color属性控制边框颜色，例如：

.example {
  border-style: solid;
  border-width: 2px;
  border-color: #ccc;
}

可以使用简写形式，例如：

.example {
  border: 2px solid #ccc;
}

上面的代码表示，.example类的元素会有2像素宽度、实线、灰色边框。

二、虚线边框

虚线边框可以通过border-style属性设置dashed或dotted值来实现，例如：

.example {
  border-style: dashed;
  border-width: 2px;
  border-color: #ccc;
}

同样可以使用简写形式：

.example {
  border: 2px dashed #ccc;
}

三、圆角边框

使用border-radius属性可以实现圆角边框，例如：

.example {
  border: 2px solid #ccc;
  border-radius: 10px;
}

上面的代码表示，.example类的元素会有2像素宽度、实线、灰色边框，并且四个角会被圆角化。

四、阴影边框

使用box-shadow属性可以为元素添加阴影边框，例如：

.example {
  border: none;
  box-shadow: 2px 2px 2px #ccc;
}

上面的代码表示，.example类的元素没有边框，但是有一个2像素宽度、灰色阴影边框。

五、渐变边框

使用CSS的渐变技术可以为元素添加渐变边框，例如：

.example {
  border: none;
  border-image: linear-gradient(to right, #ccc, #000) 1;
}

上面的代码表示，.example类的元素没有边框，但是有一个渐变的边框，从灰色渐变到黑色，边框宽度为1像素。

六、小结

CSS的边框样式有多种，可以根据不同的需求选择不同的样式，实线边框和虚线边框是最基本的，圆角边框可以让元素更加柔和，阴影和渐变边框可以为元素带来更加丰富的视觉效果。