如果有一個需求，給一個元素增加一條邊框，想必大家會習慣且嫻熟的使用border來實現，
其實outline也能達到同樣的效果，並且在有些場景下會更適用，比如下面的demo
使用border后，div寬度增加，導致超出父元素
使用outline后，div元素寬度不會改變
DEMO
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .main { width: 1200px; } .inner { margin: 0 5px; width: 390px; height: 300px; float: left; border: 1px solid blue; /*outline: solid 1px blue;*/ } </style> </head> <body> <div class="main"> <div class="inner"></div> <div class="inner"></div> <div class="inner"></div> </div> </body> </html>
那么到底border和outline到底有什么區別呢？
outline是不占空間的，即不會增加額外的寬度（width）或高度（height）
這也涉及到了盒子模型的知識，之前寫過一篇博客：https://www.cnblogs.com/tu-0718/p/7443995.html