CSS 边框各边

CSS 边框 - 单独的边

从上一章的例子中，您已经看到可以为每一侧指定不同的边框。

在 CSS 中，还有一些属性可用于指定每个边框（顶部、右侧、底部和左侧）：

实例

  1. p {
  2.   border-top-style: dotted;
  3.   border-right-style: solid;
  4.   border-bottom-style: dotted;
  5.   border-left-style: solid;
  6. }

结果：

不同的边框样式

不同的边框样式

上例的结果与此相同：

实例

  1. p {
  2.   border-style: dotted solid;
  3. }

它的工作原理是这样的：

如果 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;

  • 四条边均为虚线

实例

  1. /* 四个值 */
  2. p {
  3.   border-style: dotted solid double dashed; 
  4. }
  6. /* 三个值 */
  7. p {
  8.   border-style: dotted solid double; 
  9. }
  11. /* 两个值 */
  12. p {
  13.   border-style: dotted solid; 
  14. }
  16. /* 一个值 */
  17. p {
  18.   border-style: dotted; 
  19. }

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