每日笔记，CSS 边框 4个单边设置，用css单独设置每条边框，如何用css修改div单边

CSS 边框 - 上下左右4个单边设置

我们可以为每一侧指定不同的边框，单独给这些边指定不同的属性。

实例

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

实例输出如下

不同的边框样式

不同的边框样式

上例的结果与此相同：

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-width 和 border-color 也同样适用。