CSS边框border属性

元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。

CSS border 属性允许你规定元素边框的样式、宽度和颜色。

CSS边框

在 HTML 中，我们使用表格来创建文本周围的边框，但是通过使用 CSS 边框属性，我们可以创建出效果出色的边框，并且可以应用于任何元素。
元素外边距内就是元素的的边框 (border)。元素的边框就是围绕元素内容和内边据的一条或多条线。

边框与背景

CSS 规范指出，边框绘制在“元素的背景之上”。这很重要，因为有些边框是“间断的”（例如，点线边框或虚线框），元素的背景应当出现在边框的可见部分之间。

CSS2 指出背景只延伸到内边距，而不是边框。后来 CSS2.1 进行了更正：元素的背景是内容、内边距和边框区的背景。大多数浏览器都遵循 CSS2.1 定义，不过一些较老的浏览器可能会有不同的表现。

边框的样式

样式是边框最重要的一个方面，这不是因为样式控制着边框的显示（当然，样式确实控制着边框的显示），而是因为如果没有样式，将根本没有边框。

CSS 的 border 属性定义了 10 个不同的样式非 inherit 样式，包括 none。

属性代码格式

border元素可以设置 （left ， right， top ， bottom ） 四个控制border的边框上下左右的属性
1，none 定义无边框

.box{border-style: none} 

2，hidden 与“none”相同。不过应用于表时除外，hidden用于解决边框冲突。

.box{border-style: hidden;}

3，dotted 定义点状边框。在大多数浏览器中呈现为实线。

.box{border-style: dotted;}

4，dashed 定义虚线。在大多数浏览器中呈现为实线。

 .box{border-style: dashed;}

5，solid 定义实线（比较常用）。

 .box{border-style: solid;}

6，double 定义双线。双线的宽度等于 border-width 的值。

    .box{
        border-width: 10px;
        border-style: double;
    }

7，groove 定义 3D 凹槽边框。其效果取决于 border-color和border-width 的值。

     .box{
        border-width: 30px;
        border-color: aqua;
        border-style: groove;
    }

8，ridge 定义 3D 垄状边框。其效果取决于 border-color和border-width 的值。

   .box{
          border-width: 30px;
          border-color: bisque;
          border-style: ridge;
    }

9，inset 定义 3D inset 边框。其效果取决于 border-color和border-width 的值。

     .box{
          border-width: 30px;
          border-color: bisque;
          border-style: inset;
     }

10，outset 定义 3D outset 边框。其效果取决于 border-color 和border-width的值。

     .box{
          border-width: 30px;
          border-color: olive;
          border-style: outset;
     }

11， inherit 规定应该从父元素继承边框样式。

     .box1{
          border-width: 30px;
          border-color: olive;
          border-style: outset;
     }
   .box2  {
          border-style: inherit;
          border-width: 10px;
     }