CSS 边框

学习 border-style/width/color/radius · 难度：入门 · +10XP

CSS 边框详解

边框是网页元素的重要视觉边界，CSS 的 border 属性让你可以设置元素的边框宽度、样式和颜色。通过灵活运用边框，可以创造出丰富的视觉效果，从简单的分隔线到复杂的装饰边框。

边框简写 border

border 属性可以同时设置边框的宽度、样式和颜色。三个值的顺序可以任意排列。

div {
  border: 2px solid #333;
}
.card {
  border: 1px solid #e0e0e0;
}
.highlight {
  border: 3px dashed #ff6600;
}

边框样式 border-style

border-style 属性决定边框的样式。常用的样式包括：

div.solid  { border-style: solid;  }  /* 实线 */
div.dashed { border-style: dashed; }  /* 虚线 */
div.dotted { border-style: dotted; }  /* 点线 */
div.double { border-style: double; }  /* 双线 */
div.groove { border-style: groove; }  /* 凹槽效果 */
div.ridge  { border-style: ridge;  }  /* 凸起效果 */
div.inset  { border-style: inset;  }  /* 内凹效果 */
div.outset { border-style: outset; }  /* 外凸效果 */
div.none   { border-style: none;   }  /* 无边框 */
div.hidden { border-style: hidden; }  /* 隐藏边框 */

边框宽度 border-width

边框宽度可以用 px、em、rem 等单位，也可以用预定义关键字 thin、medium 和 thick。

div.thin   { border-width: 1px; }
div.medium { border-width: 3px; }
div.thick  { border-width: 5px; }
/* 分别设置四边 */
div.mixed {
  border-width: 1px 2px 3px 4px;  /* 上 右 下 左 */
}

边框颜色 border-color

div {
  border-color: #ff0000;
}
div.colorful {
  border-color: red green blue yellow;  /* 上 右 下 左 */
}
div.transparent {
  border-color: transparent;  /* 透明边框 */
}

单边边框

你可以单独设置某一边的边框：

div {
  border-top: 3px solid #2196F3;     /* 上边框 */
  border-right: 2px dashed #4CAF50;  /* 右边框 */
  border-bottom: 4px double #FF5722; /* 下边框 */
  border-left: 1px dotted #9C27B0;   /* 左边框 */
}

圆角边框 border-radius

border-radius 可以让边框和元素背景产生圆角效果。这是现代 Web 设计中最常用的属性之一。

div.rounded {
  border-radius: 10px;
}
div.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;  /* 正圆形 */
}
div.pill {
  border-radius: 999px;  /* 胶囊形 */
}

边框样式速查表

属性	作用	常用值	示例
border	四边简写	width style color	border: 2px solid #333;
border-style	边框样式	solid/dashed/dotted/double/none	border-style: dashed;
border-width	边框宽度	px / thin/medium/thick	border-width: 3px;
border-color	边框颜色	颜色值 / transparent	border-color: #e0e0e0;
border-radius	圆角	px / %	border-radius: 8px;
border-top	上边框	width style color	border-top: 2px solid blue;
outline	外轮廓	width style color	outline: 2px solid red;

???? 练习

1. 创建一个带圆角边框的卡片，设置浅灰色背景和 1px 实线边框
2. 用 CSS 画一个正圆形头像框（宽高 80px，边框 3px 彩色）
3. 制作一个只有下边框的分隔线效果
4. 尝试用 dashed、dotted 和 double 样式创建不同的虚线效果
5. 为一个按钮设置不同的 hover 边框效果（颜色变化）