详解css border的所有属性（示例代码）

还是大剑师兰特：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；CSDN知名博主，GIS领域优质创作者，深耕openlayers、leaflet、mapbox、cesium，canvas，webgl，echarts等技术开发，欢迎加底部微信（gis-dajianshi），一起交流。

文章目录

• • • 单一属性
    • 复合属性（简写）
    • 单边边框属性
    • 边框半径（CSS3）
    • 更多细节

CSS的border属性用于设置元素的边框样式、宽度和颜色。以下是详细解释和示例代码：

单一属性

1. border-width

   • 定义边框的宽度。
   • 可接受值：thin、medium、thick 或具体的长度单位（如 px、em、rem 等，但不支持 %）。
   • 示例代码：

     div {
       border-width: 3px;
     }
     

2. border-style

   • 定义边框的样式。
   • 可接受值：none、hidden、dotted、dashed、solid、double、groove、ridge、inset、outset。
   • 示例代码：

     div {
       border-style: dashed;
     }
     

3. border-color

   • 定义边框的颜色。
   • 可接受值：颜色名称、十六进制颜色码、RGB/RGBA函数、HSL/HSLA函数等。
   • 示例代码：

     div {
       border-color: red;
     }
     

复合属性（简写）

1. border
   • 一次设置边框的宽度、样式和颜色。
   • 顺序：border: width style color;
   • 示例代码：

     div {
       border: 2px solid blue;
     }
     

单边边框属性

• border-top、border-right、border-bottom、border-left
  • 分别设置元素的上、右、下、左边框。
  • 示例代码：

    div {
      border-top: 1px solid #ccc;
      border-bottom: 3px dotted green;
    }
    

边框半径（CSS3）

• border-radius
  • 定义元素边框的圆角半径。
  • 示例代码：

    div {
      border-radius: 10px; /* 四个角都为10px */
      border-radius: 10px 5px; /* 左上和右下角为10px，右上和左下角为5px */
      border-radius: 10px 5px 20px 15px; /* 分别设置四个角的圆角半径 */
    }
    

更多细节

• 边框的简写属性也可以分开单独应用于单个边框，如 border-top-width、border-top-style 和 border-top-color。
• 边框颜色可以设置为透明，例如 border-color: transparent;。
• 如果在简写属性中省略某一项，未指定的项将采用其默认值（例如 border-width 默认为 medium，border-style 默认为 none，border-color 通常继承自父元素的 color 属性）。

综上所述，CSS的边框属性提供了多种方式来定制元素的外观，使其既能适应各种布局需求，又能增强视觉效果。