CSS3 边框

CSS3 引入了许多新的边框样式和属性，使得网页设计更加灵活和丰富。以下是一些主要的 CSS3 边框属性：

border-radius：用于设置边框的圆角。

.example {
  border-radius: 10px; /* 所有角都是10px的圆角 */
  border-radius: 10px 20px 30px 40px; /* 每个角的圆角不同 */
}

border-image：允许你将图片用作边框。

.example {
  border-image: url('border.png') 30 30 round; /* 图片路径，边框宽度，边框重复方式 */
}

box-shadow：为元素添加阴影效果。

.example {
  box-shadow: 10px 10px 5px #888888; /* 偏移量，模糊半径，阴影颜色 */
}

border-color：设置边框的颜色。

.example {
  border-color: red; /* 单色边框 */
  border-color: red green blue; /* 多色边框，每个方向一个颜色 */
}

border-style：设置边框的样式。

.example {
  border-style: solid; /* 实线 */
  border-style: dashed; /* 虚线 */
  border-style: dotted; /* 点线 */
}

border-width：设置边框的宽度。

.example {
  border-width: 2px; /* 所有边框宽度为2px */
  border-width: 1px 2px 3px 4px; /* 每个边框宽度不同 */
}

outline：类似于边框，但不占用空间，常用于聚焦状态。

.example:focus {
  outline: 2px solid blue; /* 聚焦时显示蓝色边框 */
}

border-collapse：用于设置表格边框的合并方式。

table {
  border-collapse: collapse; /* 边框合并 */
}

border-spacing：设置表格边框之间的间距。

table {
  border-spacing: 10px; /* 边框间距为10px */
}

这些属性可以组合使用，创造出各种复杂的边框效果。