AI 中文社
Copyright © 2022-2024 aizws.net · 网站版本: v1.2.6·内部版本: v1.23.3·
页面加载耗时 0.00 毫秒·物理内存 61.9MB ·虚拟内存 1299.8MB
欢迎来到 AI 中文社区（简称 AI 中文社），这里是学习交流 AI 人工智能技术的中文社区。 为了更好的体验，本站推荐使用 Chrome 浏览器。
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-width 和 border-color 也同样适用。
下一章：CSS 简写边框属性
CSS Border - 简写属性：就像您在上一章中所见，处理边框时要考虑许多属性。为了缩减代码，也可以在一个属性中指定所有单独的边框属性。border 属性是以下各个边框属性的简写属性：border-width、border-style、border-color