1. 概念
輪廓(outline)是繪製在元素周圍的一條線，位於邊框邊緣的外圍，可起到突出元素的作用。
舉個例子來說吧：在我們平時閱讀瀏覽器裡的內容時，當滑鼠點擊讓一個a標籤連結或一個input的單選框獲得焦點的時候，該元素將會被一個輪廓虛線框圍繞。這個輪廓虛線框就是輪廓(outline)。
在預設情況下，點選a標籤，input，或是新增滑鼠點擊事件的時候，瀏覽器就會留下一個輪廓外框(chrome之下為藍色)。然而這些預設的輪廓外框，有時很影響美觀，破壞了前端頁面的整體效果，我們並不是很想保留下來。那麼如何把瀏覽器預設的輪廓外框去掉，又或者改變這個預設的輪廓外框效果呢？
CSS outline 屬性規定元素輪廓的樣式、顏色和寬度。
輪廓和邊框看起來非常相似，但它們之間也並非沒有區別，例如：
（1）元素上下左右四個方向上邊框的樣式、寬度、顏色可以單獨設置，而輪廓在元素四個方向的寬度、樣式、顏色都是相同的，不能單獨設置；
（2）邊框的寬度會直接影響元素的尺寸，而輪廓不會佔用頁面空間，不會影響頁面的佈局，但是輪廓會與頁面上的其它元素發聲重疊；
（3）除了會與周圍的元素發聲重疊外，輪廓對周圍的元素沒有任何影響；
（4）邊框是元素尺寸的一部分，而輪廓不是，也就是說無論輪廓的寬度是多少，元素的尺寸都不會改變；
（5）輪廓可以不是矩形的，但您不能直接建立圓形輪廓。
2. 屬性
可以使用下面幾個屬性來為元素設定輪廓：
（1）outline：在一個聲明中設定所有的輪廓屬性，輪廓的簡寫屬性，可以使用outline 屬性中同時設定上面的三個輪廓屬性；
outline-coloroutline-styleoutline-widthinherit
●outline的值可以按任何順序列出，且這些值都可以忽略。
●JavaScript語法
object.style.outline=#0000FFdottedthin
（2）outline-color：設定輪廓的顏色；
color-namehex-numberrgb-numberinvertinherit
●注意：請始終在outline-color屬性之前聲明outline-style屬性。元素只有獲得輪廓以後才能改變其輪廓的顏色。
●outline-color屬性設定一個元素整個輪廓中可見部分的顏色。
●JavaScript語法
object.style.outlineColor=#0000FF
（3）outline-style：設定輪廓的樣式；
nonedotteddashedsoliddoublegrooveridgeinsetoutsetinherit
●outline-style屬性 用來設定元素的整個輪廓的樣式。樣式不能是none，否則輪廓不會出現。
●注意：請始終在outline-color屬性之前聲明outline-style屬性。元素只有獲得輪廓以後才能改變其輪廓的顏色。
●輪廓線不會佔據空間，也不一定是長方形
●JavaScript語法
object.style.outlineStyle=dotted
（4）outline-width：設定輪廓的寬度；
thinmediumthicklengthinherit
●注意：請務必在outline-width屬性之前聲明outline-style 屬性。元素只有獲得輪廓以後才能改變其輪廓的顏色。
●寬度不允許是負數
●JavaScript語法
object.style.outlineWidth=thin
（5）outline-offset：設定輪廓與邊框之間的距離
舉例：
<!DOCTYPEhtml><html><head><styletype=text/css>p{text-align:center;border:redsolidthin;outline:#00ff00dottedthick;}</style></head><body><p>Dotcpp程式設計歡迎大家來學習</p></body></html>運行結果：
