CSS 边框

CSS 边框 - 单独的边

从前面几页的示例中，您已经看到可以为每一侧指定不同的边框。

在 CSS 中，还有用于指定每个边框（上、右、下、左）的属性：

示例

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

结果：

Different Border Styles

亲自试一试 »

上面的示例给出了与此相同的结果：

示例

p {
border-style: dotted solid;
}

亲自试一试 »

那么，它的工作原理如下：

如果border-style属性有四个值：

边框样式：点实线双虚线；
- 顶部边框是虚线的
- 右边框是实心的
- 底部边框是双边框
- 左边框是虚线

如果border-style属性具有三个值：

边框样式：点实双；
- 顶部边框是虚线的
- 左右边框是实心的
- 底部边框是双边框

如果border-style属性有两个值：

边框样式：点实线；
- 顶部和底部边框是点状的
- 左右边框是实心的

如果border-style属性有一个值：

边框样式：点线；
- 所有四个边框都是点状的

示例

/* Four values */
p {
border-style: dotted solid double dashed;
}

/* Three values */
p {
border-style: dotted solid double;
}

/* Two values */
p {
border-style: dotted solid;
}

/* One value */
p {
border-style: dotted;
}

亲自试一试 »

这个border-style上面的例子中使用了属性。然而，它也适用于border-width和border-color。