【CSS】outline和border的区别

121 阅读1分钟

outline和border显示效果类似。区别:

  1. outline不占用网页布局空间,既不会增加额外的width或者height(这样不会导致浏览器渲染时出现reflow或是repaint)。他是一种动态样式,只有在元素获得焦点或者被激活的时候呈现效果,突出元素的作用。border是盒模型的一部分。
  2. outline创建的轮廓线四边都必须是一样的,而border可以不同。outline的外轮廓线必须闭合,不可以只设置一边。
  3. outline创建的轮廓线可以向内扩展(将outline-offset设置为负值),而border只能向内。
  4. outline有可能是非矩形的(火狐浏览器下)。 在FireFox浏览器中,就有和outline匹对的圆角夫妻outline-radius

在浏览器里,当鼠标点击或使用Tab键让一个链接或者一个radio获得焦点的时候,该元素将会被一个轮廓虚线框围绕。这个轮廓虚线框就是 outline

去除焦点虚线:

style="outline:medium none;" hidefocus="true"