聊到CSS盒子边框，真的有太多话想说。新手写边框，要么样式不生效，要么单边框设置乱套，甚至想做个多边框，折腾半天没头绪，最后只能临时找百度，耽误时间不说，还容易留下bug。
先澄清一个最容易踩的坑：边框不是单纯画个线，它是CSS盒子模型的重要一环，会占用盒子尺寸，不注意这点，布局很容易错位。而且边框的设置，就围绕三件事：样式、颜色、大小，搞懂这三个，再学单/多边框，就简单多了。
边框样式是基础，没有样式，再设颜色和大小也白搭。常用的就几种：solid是实线，最常用，比如按钮、卡片的边框；dashed是虚线，适合提示框、辅助线；dotted是点线，比较精致，多用于表单输入框；还有double双线，平时用得少，适合特殊设计。最坑的是默认样式none，新手常忘了设样式，导致边框不显示，调试半天没方向。
然后是边框颜色，没什么复杂的，和平时设置文字颜色一样。可以写颜色名，比如red、blue，但不推荐，容易有偏差；常用十六进制，比如#007fff、#ddd，精准又规范；也能写rgb，比如rgb(0,127,255)，想调透明度就用rgba，比如rgba(0,127,255,0.5)，半透明边框超实用。
边框大小，用border-width控制，单位常用px，1px最细，适合精致边框，2-3px适合卡片、按钮，超过5px就偏粗了，除非有特殊设计。注意，大小不能单独生效，必须配合边框样式，不然设了width也显示不出来，这点新手一定要记牢。
单边框设置，就是只给盒子的某一边加边框，比如只加下边框、左边框。不用写完整的border，直接用border-top、border-right、border-bottom、border-left，比如border-bottom: 1px solid #ddd，就是只给盒子底部加一条灰色实线，平时做分隔线、下划线，全靠它，省不少代码。
多边框设置，新手容易懵，其实就两种简单方法。一种是用border叠加outline，outline是边框外面再套一层线，和border不重叠，比如border: 2px solid #007fff; outline: 2px solid #ddd，就能做出双层边框；另一种是用box-shadow，叠多个阴影，适合做多层渐变边框，简单又灵活，不用额外加标签。
话不多说，整个综合实例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS盒子边框综合实例</title>
<style>
/* 重置默认样式，避免布局错位 */
* { box-sizing: border-box; margin: 20px; padding: 0; }
/* 1. 基础边框（样式+颜色+大小） */
.basic-border {
width: 150px;
height: 100px;
border: 2px solid #007fff; /* 大小2px+实线+蓝色 */
}
/* 2. 单边框设置（只加下边框） */
.single-border {
width: 150px;
height: 100px;
border-bottom: 2px dashed #ddd; /* 底部虚线边框 */
}
/* 3. 多边框设置（两种方法） */
.multi-border1 {
width: 150px;
height: 100px;
border: 2px solid #007fff;
outline: 2px solid #ddd; /* 方法1：outline叠加 */
outline-offset: 3px; /* 控制outline和border的间距 */
}
.multi-border2 {
width: 150px;
height: 100px;
border: 2px solid #f00;
/* 方法2：box-shadow叠加，实现多层边框 */
box-shadow: 0 0 0 2px #ff9900, 0 0 0 5px #00cc66;
}
</style>
</head>
<body>
<div class="basic-border">基础边框（实线+蓝色）</div>
<div class="single-border">单边框（仅底部虚线）</div>
<div class="multi-border1">多边框（outline叠加）</div>
<div class="multi-border2">多边框（box-shadow叠加）</div>
</body>
</html>
另外，边框还有圆角border-radius，平时可以搭配使用，让边框更精致，但别贪多，圆角太大反而不协调。另外，单边框设置时，别漏写样式，比如只写border-left: 1px #ddd，没写solid，边框还是不显示，这种低级错误，我刚入行时也犯过好几次。
评论