CSS 边框（Border）样式详解
CSS 提供了多种边框样式，使我们能够控制元素的外观。本文将详细介绍 CSS 边框的各种属性及应用示例。
1. 基本边框属性
CSS 主要使用 border 相关属性定义边框，基本语法如下：
border: [边框宽度] [边框样式] [边框颜色];
示例：
div {border: 2px solid red;
}
1.1 border-width —— 边框宽度
thin、medium、thick预定义值。- 具体值（如
2px、5px）。
示例：
div {border-width: 5px;
}
1.2 border-style —— 边框样式
常见边框样式：
solid（实线）dotted（点线）dashed（虚线）double（双线）groove（凹陷）ridge（凸起）inset（内嵌效果）outset（外嵌效果）none（无边框）
示例：
div {border-style: dashed;
}
1.3 border-color —— 边框颜色
- 可使用颜色名称（如
red）、十六进制（#ff0000）、RGB（rgb(255,0,0)）或 HSL 颜色值。
示例：
div {border-color: blue;
}
2. 单独设置边框
可以针对 top、right、bottom 和 left 单独定义边框：
border-top: 2px solid blue;
border-right: 4px dashed green;
border-bottom: 3px double red;
border-left: 5px groove orange;
示例：
div {border-top: 5px solid black;border-bottom: 3px dashed gray;
}
3. 圆角边框（border-radius）
使用 border-radius 创建圆角或圆形边框。
3.1 统一圆角
div {border-radius: 10px;
}
3.2 指定不同角的圆角
div {border-top-left-radius: 10px;border-top-right-radius: 20px;border-bottom-right-radius: 30px;border-bottom-left-radius: 40px;
}
3.3 创建圆形
div {width: 100px;height: 100px;border-radius: 50%;
}
4. 复合边框效果
可以结合 box-shadow 和 outline 创建更复杂的视觉效果。
4.1 outline 轮廓边框
outline 不会占据额外的空间。
div {border: 2px solid black;outline: 3px dashed red;
}
4.2 结合 box-shadow 增强边框
div {border: 3px solid blue;box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
5. 动态边框效果
5.1 悬停时改变边框颜色
div:hover {border-color: red;
}
5.2 动画边框
@keyframes border-animation {0% { border-color: red; }50% { border-color: blue; }100% { border-color: green; }
}div {border: 5px solid;animation: border-animation 3s infinite;
}
6. 结论
本文介绍了 CSS 边框的基本用法，包括边框样式、颜色、宽度、圆角、动态效果等。掌握这些技巧，可以让你的网页设计更加美观生动！
