borde和outline的区别

边框属性：border

border连写方法：border：border-width border-style border-color；

统一设置元素各边框的格式：当值有4个时，依次按照上、右、下、左设置；当值有3个时，依次按照上、左右、下设置；当值有2个时，依次按照上下、左右设置；当值只有1个时，则为4个方向设置为相同的值。

border-style：solid(实线)dashed(虚线)double(双线 )默认值为border-style:none。

border-color；默认为border-color: transparent。

轮廓属性：outline

在元素边框边缘的外围绘制一条包围元素的线，包括outline-color、outline-style、outline-width三个子属性的设置，可缺省，无固定顺序。轮廓不占据页面空间，也不一定是矩形。

outline连写方法：outline：outline-width outline-style outline-color；

outline-style
设置元素轮廓的格式，其取值与border-style类似，但没有hidden值。默认为none，无轮廓。
outline-width
设置元素轮廓的宽度，其取值与border-width类似。只有当outline-style不为none时才有效。默认为medium。
outline-color
设置元素轮廓的颜色，其取值与border-color类似。只有当outline-style不为none时才有效。默认为transparent。

区别：

outline是不占空间的，既不会增加额外的width或者height
outline有可能是非矩形的