1. 圆角边框（Border Radius）：
- 使用 border-radius 属性可以创建元素的圆角。示例：
.box {
border-radius: 10px;
}
2. 阴影边框（Box Shadow）：
- 使用 box-shadow 属性可以为元素添加阴影效果。示例：
.box {
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}
3. 边框图片（Border Image）：
- 使用 border-image 属性可以指定边框的图片，使得边框呈现更复杂的图案。示例：
.box {
border-image: url('border-image.png') 20 20 round;
}
4. 多重边框（Multiple Borders）：
- 使用 outline 属性可以为元素添加多个边框。示例：
.box {
outline: 2px solid #3498db;
outline-offset: 5px;
}
5. 盒子模型调整（Box Sizing）：
- 使用 box-sizing 属性可以调整边框对盒子尺寸的影响，包括 content-box（默认）和 border-box。示例：
.box {
box-sizing: border-box;
}
6. 边框圆角（Border Corner Shape）：
- 使用 border-*-radius 属性（如 border-top-left-radius）可以分别设置元素的各个角的圆角。示例：
.box {
border-top-left-radius: 10px;
}
7. 分割边框颜色（Border Color）：
- 使用 border-*-color 属性（如 border-top-color）可以分别设置元素的各个边框的颜色。示例：
.box {
border-top-color: #e74c3c;
}
这些CSS3边框属性可以组合使用，创造出更为复杂和独特的边框样式。它们使得开发者能够更灵活地控制和定制元素的边框外观。
转载请注明出处：http://www.zyzy.cn/article/detail/4056/CSS