参考手册
CSS 边框
CSS 边框各边
返回 CSS 边框

CSS 边框简写方式

CSS Border - 简写属性

就像您在上一章中所见，处理边框时要考虑许多属性。

为了缩减代码，也可以在一个属性中指定所有单独的边框属性。

border 属性是以下各个边框属性的简写属性：

  • border-width
  • border-style（必需）
  • border-color
语法
  1. p {
  2.   border: 5px solid red;
  3. }

结果：

一些文本

完整代码：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. p {
  6.   border: 5px solid red;
  7. }
  8. </style>
  9. </head>
  10. <body>
  12. <h1>border 属性</h1>
  14. <p>此属性是 border-width、border-style 以及 border-color 的简写属性。</p>
  16. </body>
  17. </html>
运行一下

您还可以只为一个边指定所有单个边框属性：

左边框
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. p {
  6.   border-left: 6px solid red;
  7.   background-color: lightgrey;
  8. }
  9. </style>
  10. </head>
  11. <body>
  13. <h1>border-left 属性</h1>
  15. <p>此属性是 border-left-width、border-left-style 以及 border-left-color 的简写属性。</p>
  17. </body>
  18. </html>
运行一下

结果：

一些文本

下边框
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. p {
  6.   border-bottom: 6px solid red;
  7.   background-color: lightgrey;
  8. }
  9. </style>
  10. </head>
  11. <body>
  13. <h1>border-bottom 属性</h1>
  15. <p>此属性是 border-bottom-width、border-bottom-style 以及 border-bottom-color 的简写属性。</p>
  17. </body>
  18. </html>

结果：

一些文本

CSS 边框各边

分类导航