CSS 边框边
CSS 边框 - 单独边
从上一页的示例中,您已经看到可以为每条边指定不同的边框。
在 CSS 中,还有用于指定每条边框(上、右、下、左)的属性。
示例
p {
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: 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
。