CSS 边框与圆角

边框是定义元素轮廓、分隔内容和创建视觉层次的重要工具。CSS 提供了一套完整的属性来精细控制边框的宽度、样式、颜色和圆角。

`border-width`

border-width 属性用于设置边框的宽度。你可以一次性设置所有四个方向的边框，也可以单独设置。

css

p.solid {
  border-width: 2px;
}

p.separate {
  border-top-width: 1px;
  border-right-width: 2px;
  border-bottom-width: 4px;
  border-left-width: 8px;
}

`border-style`

border-style 属性用于设置边框的样式。这是设置边框的必要属性，如果没有设置 border-style，其他所有边框属性都将无效。

solid: 实线
dashed: 虚线
dotted: 点状线
double: 双实线
groove, ridge, inset, outset: 3D 效果边框
none: 无边框
hidden: 隐藏边框

css

p.dotted { border-style: dotted; }
p.dashed { border-style: dashed; }
p.solid  { border-style: solid; }
p.double { border-style: double; }

`border-color`

border-color 属性用于设置边框的颜色。

css

p {
  border-style: solid;
  border-color: red;
}

div {
  border-style: solid;
  border-top-color: #ff0000; /* 红色 */
  border-right-color: #00ff00; /* 绿色 */
  border-bottom-color: #0000ff; /* 蓝色 */
  border-left-color: #ffff00; /* 黄色 */
}

`border` (简写属性)

使用 border 简写属性可以更方便地设置边框。你可以在一行内指定宽度、样式和颜色。

css

p {
  border: 5px solid red;
}

你也可以只为某个方向设置边框：

css

p {
  border-bottom: 6px solid red;
}

`border-radius` (圆角)

border-radius 属性是 CSS3 的一个重要特性，用于为元素添加圆角。这可以极大地柔化界面，使其更具现代感。

你可以提供一个值来为所有四个角设置相同的圆角，也可以提供多个值来为每个角单独设置。

css

/* 所有角都是 10px 圆角 */
div.a {
  border-radius: 10px;
}

/* 创建一个圆形 */
div.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

/* 单独设置每个角 */
/* top-left | top-right | bottom-right | bottom-left */
div.b {
  border-radius: 25px 0px 25px 0px;
}

通过组合使用这些边框属性，你可以创造出各种各样的视觉效果，从简单的分割线到复杂的卡片式设计。

CSS 边框与圆角 ​

border-width ​

border-style ​

border-color ​