CSS边框知识点汇总
编程小白也能轻松理解的CSS边框知识大全，含示例和代码
边框是什么？
边框就像相框一样，围绕在HTML元素（如div、图片、按钮等）的周围。它可以为元素添加视觉效果，划分区域，或者突出显示重要内容。
没有边框
普通内容区域
有边框
带边框的内容区域
边框的三要素
每个边框都由三个基本属性组成，就像汉堡有三层一样：
🚩 记住这个公式：边框 = 粗细 + 样式 + 颜色
| 属性名 | 作用 | 常用值 |
|---|---|---|
| border-width | 设置边框粗细 | 像素(px)、点(pt)、厘米(cm)等，如3px |
| border-style | 设置边框样式 | solid(实线), dashed(虚线), dotted(点线), double(双线) |
| border-color | 设置边框颜色 | 颜色名称(red)，十六进制(#ff0000)，RGB(rgb(255,0,0)) |
分别设置三要素的例子
div {
border-width: 3px; /* 边框粗细 */
border-style: solid; /* 边框样式 */
border-color: #3498db; /* 边框颜色 */
}
border-width: 3px; /* 边框粗细 */
border-style: solid; /* 边框样式 */
border-color: #3498db; /* 边框颜色 */
}
效果展示
边框三要素示例
边框的简写方式
每次都要写三个属性太麻烦了！CSS提供了简写方式，可以一次性设置边框的三个属性：
/* 顺序：粗细 样式 颜色 */
div {
border: 3px solid #3498db;
}
div {
border: 3px solid #3498db;
}
💡 提示：三个属性的顺序可以随意调整，但大多数开发者习惯使用border: 粗细 样式 颜色;的顺序
不同边框样式展示
实线 (solid)
border: 3px solid #e74c3c;
虚线 (dashed)
border: 3px dashed #2ecc71;
点线 (dotted)
border: 3px dotted #f39c12;
双线 (double)
border: 5px double #9b59b6;
单独设置各边边框
有时候我们只需要在某些边添加边框，CSS提供了分别控制四个边的能力：
| 属性名 | 作用 | 示例 |
|---|---|---|
| border-top | 只设置上边框 | border-top: 2px dashed red; |
| border-right | 只设置右边框 | border-right: 4px dotted blue; |
| border-bottom | 只设置下边框 | border-bottom: 3px solid green; |
| border-left | 只设置左边框 | border-left: 5px double purple; |
综合示例
div {
border-top: 4px dashed #e74c3c;
border-right: 4px dotted #3498db;
border-bottom: 4px double #2ecc71;
border-left: 4px solid #f39c12;
}
border-top: 4px dashed #e74c3c;
border-right: 4px dotted #3498db;
border-bottom: 4px double #2ecc71;
border-left: 4px solid #f39c12;
}
效果展示
不同边的不同边框
边框圆角 (border-radius)
默认边框是直角的，使用border-radius可以让边框变成圆角，这个属性非常常用！
/* 四个角使用相同圆角 */
div {
border-radius: 10px;
}
/* 分别设置四个角 */
div {
border-radius: 左上 右上 右下 左下;
border-radius: 10px 20px 30px 40px;
}
div {
border-radius: 10px;
}
/* 分别设置四个角 */
div {
border-radius: 左上 右上 右下 左下;
border-radius: 10px 20px 30px 40px;
}
小圆角
border-radius: 10px;
大圆角
border-radius: 30px;
圆形
border-radius: 50%;
不同圆角
border-radius: 20px 5px 30px 50px;
边框阴影 (box-shadow)
box-shadow可以为元素添加阴影效果，让元素看起来有立体感，像是浮在页面上
/* 语法：水平偏移 垂直偏移 模糊程度 扩散大小 颜色 */
div {
box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
}
/* 内阴影 */
div {
box-shadow: inset 0 0 10px #3498db;
}
div {
box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
}
/* 内阴影 */
div {
box-shadow: inset 0 0 10px #3498db;
}
普通阴影
box-shadow: 5px 5px 15px rgba(0,0,0,0.2);
内阴影
box-shadow: inset 0 0 15px #3498db;
多重阴影
多重阴影效果
边框图像 (border-image)
border-image允许你使用图片来创建边框，这可以制作出非常独特的边框效果
div {
border: 15px solid transparent; /* 设置透明边框 */
border-image: url(‘border.png’) 30 stretch;
}
border: 15px solid transparent; /* 设置透明边框 */
border-image: url(‘border.png’) 30 stretch;
}
自定义边框图像
渐变边框
（示例使用了CSS渐变代替图片）
边框使用技巧
✨ 技巧1：使用边框创建三角形
.triangle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #3498db;
}
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #3498db;
}
✨ 技巧2：使用边框创建分割线效果
.separator {
border-top: 1px solid #eee;
border-bottom: 1px solid #fff;
}
border-top: 1px solid #eee;
border-bottom: 1px solid #fff;
}