CSS 边框
03-css2026/11/14
CSS 边框（Border）是盒子模型的重要组成部分，用于围绕元素的内容和内边距绘制线条。边框不仅用于装饰，还能提供视觉分隔和焦点指示。
边框的基本属性
1. border-width - 边框宽度
设置边框的粗细。
常用值： thin | medium | thick | <length>（如 2px, 0.5em）
div {
border-width: 2px; /* 所有边2px */
border-width: 1px 3px; /* 上下1px，左右3px */
border-width: 1px 2px 3px 4px; /* 上1px、右2px、下3px、左4px（顺时针）*/
/* 也可以分别设置 */
border-top-width: 5px;
border-right-width: 3px;
border-bottom-width: 1px;
border-left-width: 3px;
}
2. border-style - 边框样式
设置边框的线条样式。
div {
border-style: solid; /* 实线 */
border-style: dashed; /* 虚线 */
border-style: dotted; /* 点线 */
border-style: double; /* 双实线 */
border-style: groove; /* 3D凹槽 */
border-style: ridge; /* 3D凸槽 */
border-style: inset; /* 3D内嵌 */
border-style: outset; /* 3D外凸 */
border-style: none; /* 无边框 */
border-style: hidden; /* 隐藏边框 */
}
3. border-color - 边框颜色
设置边框的颜色。
div {
border-color: red; /* 所有边红色 */
border-color: #ccc #333; /* 上下#ccc，左右#333 */
border-color: red green blue yellow; /* 上红、右绿、下蓝、左黄 */
/* 也可以分别设置 */
border-top-color: #ff0000;
border-right-color: #00ff00;
}
透明边框技巧：
div {
border: 2px solid transparent; /* 透明边框，占位但不显示 */
border: 2px solid rgba(0, 0, 0, 0.3); /* 半透明边框 */
}
4. border-radius - 边框圆角
创建圆角边框，是现代网页设计的关键属性。
div {
border-radius: 10px; /* 所有角10px圆角 */
border-radius: 50%; /* 圆形（当元素宽高相等时）*/
border-radius: 10px 20px; /* 左上右下10px，右上左下20px */
border-radius: 10px 20px 30px 40px; /* 左上10px，右上20px，右下30px，左下40px */
/* 分别设置每个角的水平和垂直半径 */
border-radius: 10px 20px 30px 40px / 5px 10px 15px 20px;
/* 也可以单独设置每个角 */
border-top-left-radius: 15px;
border-top-right-radius: 5px 10px; /* 水平半径 垂直半径 */
}
5. border-image - 边框图片
使用图像作为边框。
div {
border: 30px solid transparent;
border-image: url("border.png") 30 round;
/* 图片 切片 重复方式 */
}
6. box-shadow - 盒子阴影（虽然不是 border 属性，但常一起使用）
为元素添加阴影效果。
div {
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
/* 水平偏移(x偏移) 垂直偏移(y偏移) 模糊半径 颜色 */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.1); /* 多重阴影 */
box-shadow: inset 0 0 10px #000; /* 内阴影 */
}