Border边框属性与Outline轮廓属性的联系

Border边框属性：边框样式属性指定要显示什么样的边界。

border-color：颜色

            name - 指定颜色的名称，如 "red"

            RGB - 指定 RGB 值, 如 "rgb(255,0,0)"

             Hex - 指定16进制值, 如 "#ff0000"

border-width：宽度

border-style：样式

           dotted: 定义一个点线边框

           dashed: 定义一个虚线边框

           solid: 定义实线边框

           double: 定义两个边框（两个边框的宽度和 border-width 的值相同）。

 border-style属性可以有1-4个值：上   右    下    左

                                                      上  右左  下

                                                      上下   左右

                                                        四面边框

 

 除此之外，style还有四种边框样式：

                                                           

Outline轮框属性：是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

outline与border在属性设置上是相同的，完全可以照搬border的属性设置方式，在这里就不多说了！重点可以看一下两者的位置分布；

在下图中，可以明显看出outline将border包裹起来。

                                                                                     

 

         简单来说两者之间的区别：

                                         1.outline是不占空间的，既不会增加额外的width或者height
                                         2.outline有可能是非矩形的（火狐浏览器下）