border与outline区别

首先,outline和border在视觉效果上一样，但是outline 不占空间，border占据空间.

代码如下:

 

 

效果：

1.给元素添加outline属性后，元素宽高不变，仍为100*100，所以outline不占据空间.

 

 

 

 2.给元素添加border属性后，元素宽高均增加2,border的宽度为102,102，所以border占据空间.

 

 

border 可应用于几乎所有有形的html元素，而 outline 是针对链接、表单控件和ImageMap等元素设计。

 outline 的效果会随元素的 focus 而自动出现，也会由 blur 的设置而自动消失。这些都是浏览器的默认行为，不需要JS配合CSS去控制。