参考手册
CSS 边框
CSS 边框颜色
CSS 简写边框属性
返回 CSS 边框

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. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. p {
  6.   border-top-style: dotted;
  7.   border-right-style: solid;
  8.   border-bottom-style: dotted;
  9.   border-left-style: solid;
  10. }
  11. </style>
  12. </head>
  13. <body>
  15. <h1>单独的边框</h1>
  17. <p>两种不同的边框样式。</p>
  19. </body>
  20. </html>
运行一下

不同的边框样式

上例的结果与此相同：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. p {
  6.   border-style: dotted solid;
  7. }
  8. </style>
  9. </head>
  10. <body>
  12. <h1>单独的边框</h1>
  14. <p>两种不同的边框样式。</p>
  16. </body>
  17. </html>
运行一下
它的工作原理是这样的：

如果 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. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. body {
  6.   text-align: center;
  7. }
  8. /* 四个值 */
  9. p.four {
  10.   border-style: dotted solid double dashed;
  11. }
  13. /* 三个值 */
  14. p.three {
  15.   border-style: dotted solid double;
  16. }
  18. /* 两个值 */
  19. p.two {
  20.   border-style: dotted solid;
  21. }
  23. /* 一个值 */
  24. p.one {
  25.   border-style: dotted;
  26. }
  27. </style>
  28. </head>
  29. <body>
  31. <h1>单独的边框</h1>
  33. <p class="four">四种不同的边框样式。</p>
  34. <p class="three">三种不同的边框样式。</p>
  35. <p class="two">两种不同的边框样式。</p>
  36. <p class="one">一种边框样式。</p>
  38. </body>
  39. </html>
运行一下

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

CSS 边框颜色
CSS 简写边框属性

分类导航