阿丁的猫1. CSS边框基础概念与核心属性
在网页设计中，边框（border）是构建视觉层次最直接有效的工具之一。作为盒模型的组成部分，边框不仅用于划分内容区域，还能增强交互反馈、引导用户视线。现代CSS边框系统由三个基础属性构成，每个属性都有其独特的语法和表现特性。
1.1 边框样式（border-style）
border-style属性决定了边框的视觉表现形式，支持以下9种预设样式：
- solid：最常用的实线，线宽均匀无间断
- dashed：虚线，线段与间隔长度比为3:1（CSS3标准）
- dotted：圆点虚线，在低DPI屏幕上可能显示为方点
- double：双实线，两条线加中间间隔的总宽度等于border-width
- groove：3D凹槽效果，颜色自动基于border-color计算明暗
- ridge：3D凸起效果，与groove明暗相反
- inset：元素内嵌效果，上左深色、下右浅色
- outset：元素外凸效果，与inset相反
- none/hidden：无边框（hidden在表格边框冲突解决中有特殊作用）
实际开发中要注意：当border-style为none时，任何border-width设置都不会生效。这是新手常踩的坑。
1.2 边框宽度（border-width）
border-width接受四种类型的值：
- 绝对值：px、pt、cm等固定单位（推荐使用px）
- 相对值：em、rem等相对单位（响应式设计时有用）
- 关键字：thin(1px)、medium(3px)、thick(5px)，具体像素值因浏览器而异
- 全局值：inherit、initial等
现代浏览器中，边框宽度会影响盒模型计算。当box-sizing为content-box时（默认值），边框宽度会增加元素总尺寸；为border-box时则包含在设定尺寸内。
1.3 边框颜色（border-color）
颜色取值方式多样：
- 十六进制：#RRGGBB或#RGB简写
- RGB/RGBA：rgb(255,0,0)或rgba(255,0,0,0.5)
- HSL/HSLA：