CSS 边框各边

我们可以为每一侧指定不同的边框。

在 CSS 中,还有一些属性可用于指定每个边框(顶部、右侧、底部和左侧):

范例

p {
  border-top-style: dotted;
  border-right-style: solid;
  border-bottom-style: dotted;
  border-left-style: solid;
}

结果:

不同的边框样式

1. 不同的边框样式

上例的结果与此相同:

范例

p {
  border-style: dotted solid;
}

它的工作原理是这样的:

如果 border-style 属性设置四个值:

border-style: dotted solid double dashed;

  • 上边框是虚线
  • 右边框是实线
  • 下边框是双线
  • 左边框是虚线

如果 border-style 属性设置三个值:

border-style: dotted solid double;

  • 上边框是虚线
  • 右和左边框是实线
  • 下边框是双线

如果 border-style 属性设置两个值:

border-style: dotted solid;

  • 上和下边框是虚线
  • 右和左边框是实线

如果 border-style 属性设置一个值:

border-style: dotted;

  • 四条边均为虚线

范例

/* 四个值 */
p {
  border-style: dotted solid double dashed; 
}
/* 三个值 */
p {
  border-style: dotted solid double; 
}
/* 两个值 */
p {
  border-style: dotted solid; 
}
/* 一个值 */
p {
  border-style: dotted; 
}

上例中使用的是 border-style 属性。但 border-widthborder-color 也同样适用。

下一章:CSS 简写边框属性

CSS Border - 简写属性:就像您在上一章中所见,处理边框时要考虑许多属性。为了缩减代码,也可以在一个属性中指定所有单独的边框属性。border 属性是以下各个边框属性的简写属性:border-width、border-style、border-color