CSS3 边框

一、基础属性

1. 简写语法：
border: <宽度> <样式> <颜色>
示例：border: 2px solid #3498db;

2. 分项属性：
- border-width: 控制边框粗细
  取值：thin/medium/thick或具体数值
- border-style: 控制边框样式
  取值：solid/dotted/dashed/double等
- border-color: 控制边框颜色
  默认使用文字颜色(currentColor)

二、常见使用场景 

1. 基础装饰：
- 按钮边框
- 图片边框
- 卡片容器边框

2. 交互反馈：
- 输入框聚焦状态
- 按钮悬停效果
- 错误提示边框

3. 布局辅助：
- 调试时元素边界标记
- 临时分隔线
- 视觉分组

三、边框样式详解 

1. 平面样式：

- solid：实线(最常用)
- dotted：圆点虚线
- dashed：方形虚线
- double：双线(宽度≥3px生效)

2. 3D样式：

- groove：凹槽效果
- ridge：凸起效果
- inset：内凹陷
- outset：外凸起

四、特殊使用技巧 

1. 透明边框：
- 占位防止布局抖动
- 实现三角形效果
示例：

.triangle {
  width: 0;
  border: 20px solid transparent;
  border-top-color: red;
}

2. 边框动画：
- 颜色过渡效果
- 宽度变化动画
注意：动画可能影响性能

3. 多重边框：

- box-shadow方案
- outline方案
- 伪元素方案

五、常见问题与解决方案

1. 边框渲染不一致：
- 不同浏览器dotted/dashed表现差异
- 移动端缩放时的显示问题
解决方案：
使用图片替代或接受差异

2. 布局计算问题：
- 边框增加元素实际尺寸
解决方案：
使用box-sizing: border-box

3. 圆角边框异常：
- 父级overflow:hidden裁剪
- 图片圆角需要overflow:hidden
解决方案：
合理设置overflow属性

六、最佳实践建议

1. 性能优化：
- 避免频繁改变边框属性
- 复杂效果使用伪元素实现

2. 响应式设计：
- 使用相对单位(em/rem)
- 媒体查询调整边框大小

3. 可访问性：
- 确保足够颜色对比度
- 不单独依赖边框传达信息

== 浏览器兼容性说明 ==
1. 现代浏览器：
- 普遍支持基本特性
- border-image需要前缀

2. 旧版IE：
- IE9+支持border-radius
- IE11+支持border-image

3. 移动端：
- Android 4.4+完全支持
- 注意dotted样式表现差异