css 设置边框

摇滚侠2026-02-04 13:34

CSS 设置边框主要通过 border 简写属性或单独的样式、宽度、颜色属性来实现。

简写属性

使用 border 可以一次性定义边框的宽度、样式和颜色，顺序任意。

css 复制代码

/* 语法：border: 宽度 样式 颜色; */
div {
  border: 2px solid red; 
}

单独属性

分别控制边框的三个核心特征：

样式 (border-style) ：定义边框类型，常用值包括 solid 实线、dashed 虚线、dotted 点状线和 double 双线。这是唯一必需的属性，值为 none 时不会显示边框。
宽度 (border-width) ：定义边框粗细，可使用像素 px 等单位，或 thin、medium、thick 关键字。
颜色 (border-color)：定义边框颜色，支持颜色名称、十六进制或 RGB 值。

单边设置

若只需设置某一边的边框，可使用 border-top、border-right、border-bottom 或 border-left。

圆角效果

使用 border-radius 属性可以创建圆角，值为长度单位或百分比。

css 复制代码

/* 语法：border-radius: 水平半径 / 垂直半径; */
div {
  border-radius: 10px; /* 四个角均为10px圆角 */
}