正在加载...

CSS 边框

你会填色、放图、画渐变，也会做柔和透明。下一步：给盒子描边。边框（border） 就是框住元素的那条线——卡片、按钮、输入框和面板都常用它。

什么是边框？

CSS 边框画在元素盒子的边缘。它有三部分：宽度（多厚）、样式（长什么样——实线、虚线等）和颜色。忘了样式时，就算写了宽度，常常也看不到有用的线。

三个组成部分

把每条边框想成短配方：厚度 + 外观 + 颜料。

完整写法：宽度、样式、颜色

css
CSS Code 
.card {
border-width: 2px;
border-style: solid;
border-color: #0f766e;
padding: 1rem;
background-color: #f0fdfa;
}

为什么样式很重要

只有 border-width 不够。若没有不同于初始值 none 的 border-style，通常看不到线。先从 solid 开始，再试更花的样子。

简写：一行代替三行

border 简写把宽度、样式和颜色打包在一起。日常常见顺序：宽度 → 样式 → 颜色。

border 简写

css
CSS Code 
.panel {
border: 2px solid #0f766e;
padding: 1rem;
background-color: #ecfeff;
}

常见边框样式

样式决定线条性格。先记住一小套日常用法。

📊 常见 border-style 取值

关键字 外观 日常用途
solid 连续实线 卡片、按钮、表单字段
dashed 短虚线 占位提示、拖放区域
dotted 点线 柔和分隔、轻量边框
double 双平行线 装饰强调（少用）
none 不绘制边框 重置 / 去掉边
hidden 表格边框折叠时类似 none 表格稍后讲——先记住名字

几种样式并排对比

宽度和颜色相同，只改样式。

solid、dashed、dotted、double

css
CSS Code 
.box-solid { border: 3px solid #134e4a; }
.box-dashed { border: 3px dashed #134e4a; }
.box-dotted { border: 3px dotted #134e4a; }
.box-double { border: 3px double #134e4a; }

一次只画一边

上、右、下、左可以分别设置——适合下划线、左侧强调条或不对称卡片。

单侧边框

css
CSS Code 
.quote {
border-top: none;
border-right: none;
border-bottom: none;
border-left: 4px solid #0f766e;
padding: 0.75rem 1rem;
background-color: #f8fafc;
}

单侧简写

border-left: 4px solid #0f766e 是日常做法：只改一边，不动其他边。

日常卡片习惯

细边框加上内边距和柔和底色，看起来像清晰的卡片，不会太吵。

简单带边框的卡片

css
CSS Code 
.card {
border: 1px solid #cbd5e1;
border-radius: 0; /* 圆角是下一课——这里先保持直角 */
padding: 1rem;
background-color: #ffffff;
color: #0f172a;
}

去掉边框

要清除边框，优先用 border: none（或 border-style: none）。只设 border-color: transparent 有时仍占厚度——none 才是干净重置。

用 border none 重置

css
CSS Code 
.plain {
border: none;
}

自己试试

  1. 用完整写法做一张卡片：border-width、border-style: solid、青绿 border-color。
  2. 用 border: 2px solid #0f766e 写出同样效果。
  3. 做四个盒子：同样厚度的 solid、dashed、dotted、double。
  4. 只给引用块画一条粗左边框。
  5. 从有边框的按钮开始，再用 border: none 去掉边。

常见错误

  • 写了宽度和颜色却忘了 border-style（什么都看不见）
  • 把 border（画出的边）和 margin（外侧空隙）搞混——那是不同工具
  • 指望单靠 border 做出圆角——那是 border-radius（下一课）
  • 每一边都故意用刺眼颜色
  • 明明想 border: none，却留下很厚的透明边框

小结

  • 边框需要 宽度、样式 和 颜色
  • border: 2px solid #0f766e 是日常简写
  • 先掌握 solid、dashed、dotted、double 和 none
  • 设计需要时再分别设置各边
  • 用 border: none 干净重置
  • 现在保持直角——圆角下一课再学

🧠 测试您的知识

准备开始

测试您的知识

通过这个互动测验挑战自己，看看你对这个主题的理解程度如何

❓
9
问题
🎯
70%
及格要求
♾️
∞
时间
🔄
∞
尝试次数

📝 说明

  • 仔细阅读每个问题
  • 为每个问题选择最佳答案
  • 您可以随时重新参加测验
  • 您的进度将显示在顶部
主题 1 的 1
Css 教程