CSS概述不僅僅是一個邊界
CSS大綱屬性是一個令人困惑的屬性。 當你第一次了解它時，很難理解它與邊界財產的差異。 W3C將其解釋為具有以下不同之處：
- 輪廓不佔用空間。
- 輪廓可能不是矩形。
概述不佔用空間
這一說法本身就令人困惑。 網頁上的對像如何不佔用網頁上的空間？ 但是，如果你認為你的網頁像洋蔥一樣，頁面上的每個項目都可以分層放在另一個項目的頂部。 outline屬性不會佔用空間，因為它始終放在元素框的頂部。
當在元素周圍放置輪廓時，它對元素在頁面上的佈局沒有任何影響。 它不會更改元素的大小或位置。 如果你在一個元素上放置輪廓，它將佔用相同數量的空間，就像你沒有該元素的輪廓一樣。 這不是一個邊界。 元素上的邊框被添加到元素的外部寬度和高度。 因此，如果您的圖像寬度為50像素，邊框為2像素，則會佔用54像素（每個邊框2像素）。 具有2像素輪廓的相同圖像在頁面上只佔用50像素寬度，輪廓將顯示在圖像的外部邊緣上。
輪廓可能是非矩形的
在你開始思考“酷，現在我可以畫圈子！”之前 再想一想。 這個陳述的含義與你想像的不同。 當您在元素上放置邊框時，瀏覽器會將該元素解釋為它是一個巨型矩形框。 如果該框分成多行，則瀏覽器只會打開邊緣，因為該框未關閉。 就好像瀏覽器正在看到具有無限寬屏幕的邊框 - 寬度足以使該邊框成為一個連續的矩形。
相反，輪廓屬性考慮了邊緣。 如果輪廓元素跨越多行，則輪廓在行尾關閉，並在下一行重新打開。 如果可能的話，大綱也將保持完全連接，創建一個非矩形的形狀。
大綱屬性的用法
大綱屬性的最佳用途之一是突出顯示搜索條件。 許多網站使用背景顏色來完成此操作，但您也可以使用大綱屬性，而不用擔心在頁面上添加任何額外的空白。
輪廓顏色屬性接受術語“反轉”，使輪廓顏色成為當前背景的反色。 這使您可以突出顯示動態網頁上的元素，而無需知道使用了什麼顏色 。
您還可以使用outline屬性刪除活動鏈接周圍的虛線。 本文來自CSS-Tricks演示瞭如何去除虛線輪廓。