CSS边框属性详解
在网页设计中，边框是元素与元素之间、元素与页面之间的重要分隔线，它不仅能够美化页面，还能增强元素的识别度。CSS提供了丰富的边框属性，可以帮助开发者轻松地控制元素的边框样式、宽度和颜色。本文将详细介绍CSS边框属性的相关知识。
边框样式（border-style）
- solid（实线）：边框以实线形式显示。
- dashed（虚线）：边框以虚线形式显示。
- dotted（点线）：边框以点线形式显示。
- double（双边框）：边框以双边框形式显示。
- groove（凹槽）：边框以3D凹槽形式显示。
- ridge（脊状）：边框以3D脊状形式显示。
- inset（嵌入）：边框以3D嵌入形式显示。
- outset（突出）：边框以3D突出形式显示。
- none（无）：边框不显示。
```css
border-style: solid; / 实线边框 /
border-style: dashed; / 虚线边框 /
border-style: dotted; / 点线边框 /
border-style: double; / 双边框 /
border-style: groove; / 凹槽边框 /
border-style: ridge; / 脊状边框 /
border-style: inset; / 嵌入边框 /
border-style: outset; / 突出边框 /
border-style: none; / 无边框 /
边框宽度（border-width）
边框宽度决定了边框的粗细程度。CSS中，边框宽度可以使用以下单位：
- px（像素）：固定宽度。
- em（相对单位）：相对于当前字体大小的宽度。
- rem（相对单位）：相对于根元素字体大小的宽度。
- %：相对于父元素宽度的百分比。
```css
border-width: 1px; / 1像素宽 /
border-width: 0.5em; / 0.5em宽 /
border-width: 50%; / 50%宽 /
边框颜色（border-color）
边框颜色决定了边框的颜色。CSS中，边框颜色可以使用以下方式指定：
- 颜色名：如red、blue等。
- 十六进制颜色值：如FF0000、00FF00等。
- RGB颜色值：如rgb(255, 0, 0)、rgb(0, 255, 0)等。
- RGBA颜色值：如rgba(255, 0, 0, 0.5)、rgba(0, 255, 0, 0.5)等。
```css
border-color: red; / 红色边框 /
border-color: FF0000; / 十六进制红色边框 /
border-color: rgb(255, 0, 0); / RGB红色边框 /
border-color: rgba(255, 0, 0, 0.5); / RGBA红色边框 /
边框简写属性
- border：设置所有边框的样式、宽度和颜色。
- border-top：设置上边框的样式、宽度和颜色。
- border-right：设置右边框的样式、宽度和颜色。
- border-bottom：设置下边框的样式、宽度和颜色。
- border-left：设置左边框的样式、宽度和颜色。
```css
border: 1px solid red; / 设置所有边框为1像素红色实线 /
border-top: 2px dashed blue; / 设置上边框为2像素蓝色虚线 /
border-right: 3px solid green; / 设置右边框为3像素绿色实线 /
