CSS中，常常用到邊框（border）來裝飾HTML元素，但是邊框只能實現一些簡單的樣式，例如顏色、寬度、樣式等。而當我們需要在HTML元素周圍添加一個虛線框或者陰影時，我們就需要使用CSS中的outline（輪廓）屬性了。

/* 添加輪廓 */
outline: 1px dashed red;

outline的用法非常簡單，只需要為元素添加outline屬性并指定相應的輪廓樣式即可。

輪廓（outline）的常用屬性值：

• outline-width：指定輪廓的寬度，取值為數值或者thin、medium、thick之一。
• outline-style：指定輪廓的樣式，取值為solid、dotted、dashed、double等。
• outline-color：指定輪廓的顏色，取值為顏色值或者transparent。
• outline-offset：指定輪廓與元素邊緣之間的間距，取值為正數或者負數。

/* 完整的outline樣式 */
outline: 2px dotted blue;
outline-offset: -5px;

此外，我們還可以將outline樣式應用于特定狀態下的元素，例如hover狀態下：

/* hover狀態下添加輪廓 */
&:hover{
outline: 1px solid green;
}

總的來說，outline屬性是CSS中非常實用的一個樣式屬性，可以為HTML元素增添更多的裝飾和美觀，同時也能提升交互體驗。