1. 概念
輪廓(outline)是繪制在元素周圍的一條線，位于邊框邊緣的外圍，可起到突出元素的作用。
舉個(gè)例子來說吧：在我們平時(shí)閱讀瀏覽器里的內(nèi)容時(shí)，當(dāng)鼠標(biāo)點(diǎn)擊讓一個(gè)a標(biāo)簽鏈接或者一個(gè)input的單選框獲得焦點(diǎn)的時(shí)候，該元素將會(huì)被一個(gè)輪廓虛線框圍繞。這個(gè)輪廓虛線框就是輪廓(outline)。
在默認(rèn)情況下，點(diǎn)擊a標(biāo)簽，input，或者添加鼠標(biāo)點(diǎn)擊事件的時(shí)候，瀏覽器就會(huì)留下一個(gè)輪廓外框(chrome之下為藍(lán)色)。然而這些默認(rèn)的輪廓外框，有時(shí)候很影響美觀，破壞了前端頁面的整體效果，我們并不是很想保留下來。那么如何把瀏覽器默認(rèn)的輪廓外框去掉，又或者改變這個(gè)默認(rèn)的輪廓外框效果？
CSS outline 屬性規(guī)定元素輪廓的樣式、顏色和寬度。
輪廓和邊框看起來非常相似，但它們之間也并非沒有區(qū)別，例如：
（1）元素上下左右四個(gè)方向上邊框的樣式、寬度、顏色可以單獨(dú)設(shè)置，而輪廓在元素四個(gè)方向的寬度、樣式、顏色都是相同的，不能單獨(dú)設(shè)置；
（2）邊框的寬度會(huì)直接影響元素的尺寸，而輪廓不會(huì)占用頁面空間，不會(huì)影響頁面的布局，但是輪廓會(huì)與頁面上的其它元素發(fā)聲重疊；
（3）除了會(huì)與周圍的元素發(fā)聲重疊外，輪廓對(duì)周圍的元素沒有任何影響；
（4）邊框是元素尺寸的一部分，而輪廓不是，也就是說無論輪廓的寬度是多少，元素的尺寸都不會(huì)改變；
（5）輪廓可以不是矩形的，但您不能直接創(chuàng)建圓形輪廓。
2. 屬性
可以使用下面幾個(gè)屬性來為元素設(shè)置輪廓：
（1）outline：在一個(gè)聲明中設(shè)置所有的輪廓屬性，輪廓的簡(jiǎn)寫屬性，可以使用 outline 屬性中同時(shí)設(shè)置上面的三個(gè)輪廓屬性；
outline-color outline-style outline-width inherit
● outline的值可以按任何順序列出，且這些值都可以忽略。
● JavaScript語法
object.style.outline="#0000FF dotted thin"
（2）outline-color：設(shè)置輪廓的顏色；
color-name hex-number rgb-number invert inherit
● 注意：請(qǐng)始終在outline-color屬性之前聲明outline-style屬性。元素只有獲得輪廓以后才能改變其輪廓的顏色。
● outline-color屬性設(shè)置一個(gè)元素整個(gè)輪廓中可見部分的顏色。
● JavaScript語法
object.style.outlineColor="#0000FF"
| 值 | 描述 |
| color_name | 規(guī)定顏色值為樣冊(cè)名稱的輪廓顏色（比如red） |
| hex_number | 規(guī)定顏色值為十六進(jìn)制值的輪廓顏色（比如#ff0000） |
| rgb_number | 規(guī)定顏色值為rgb代碼的輪廓顏色（比如rgb(255，0，0)) |
| invert | 默認(rèn)。執(zhí)行顏色反轉(zhuǎn)（逆向的顏色）。 可使輪廓在不同的背景顏色中都是可見。 |
| inherit | 規(guī)定應(yīng)該從父元素繼承輪廓顏色的設(shè)置。 |
（3）outline-style：設(shè)置輪廓的樣式；
none dotted dashed solid double groove ridge inset outset inherit
● outline-style屬性用于設(shè)置元素的整個(gè)輪廓的樣式。樣式不能是none，否則輪廓不會(huì)出現(xiàn)。
● 注意：請(qǐng)始終在outline-color屬性之前聲明outline-style屬性。元素只有獲得輪廓以后才能改變其輪廓的顏色。
● 輪廓線不會(huì)占據(jù)空間，也不一定是矩形
● JavaScript語法
object.style.outlineStyle="dotted"
| 值 | 描述 |
| none | 默認(rèn)。定義無輪廓。 |
| dotted | 定義點(diǎn)狀的輪廓。 |
| dashed | 定義虛線輪廓。 |
| solid | 定義實(shí)線輪廓。 |
| double | 定義雙線輪廓。雙線的寬度等同于 outline-width的值。 |
| groove | 定義 3D 凹槽輪廓。此效果取決于 outline-color值。 |
| ridge | 定義 3D 凸槽輪廓。此效果取決于 outline-color 值。 |
| inset | 定義 3D 凹邊輪廓。此效果取決于 outline-color 值。 |
| outset | 定義 3D 凸邊輪廓。此效果取決于 outline-color 值。 |
| inherit | 規(guī)定應(yīng)該從父元素繼承輪廓樣式的設(shè)置。 |
（4）outline-width：設(shè)置輪廓的寬度；
thin medium thick length inherit
● 注意：請(qǐng)始終在outline-width屬性之前聲明 outline-style 屬性。元素只有獲得輪廓以后才能改變其輪廓的顏色。
● 寬度不允許是負(fù)數(shù)
● JavaScript語法
object.style.outlineWidth="thin"
| 值 | 描述 |
| thin | 規(guī)定細(xì)輪廓 |
| medium | 默認(rèn)。規(guī)定中等的輪廓 |
| thick | 規(guī)定粗的輪廓 |
| length | 允許您規(guī)定輪廓粗細(xì)的值 |
| inherit | 規(guī)定應(yīng)該從父元素繼承輪廓寬度的設(shè)置 |
（5）outline-offset：設(shè)置輪廓與邊框之間的距離
舉例：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p {
text-align:center;
border:red solid thin;
outline:#00ff00 dotted thick;
}
</style>
</head>
<body>
<p>Dotcpp編程歡迎大家來學(xué)習(xí)</p>
</body>
</html>運(yùn)行結(jié)果：
C語言網(wǎng)提供由在職研發(fā)工程師或ACM藍(lán)橋杯競(jìng)賽優(yōu)秀選手錄制的視頻教程，并配有習(xí)題和答疑，點(diǎn)擊了解：
一點(diǎn)編程也不會(huì)寫的：零基礎(chǔ)C語言學(xué)練課程
解決困擾你多年的C語言疑難雜癥特性的C語言進(jìn)階課程
從零到寫出一個(gè)爬蟲的Python編程課程
只會(huì)語法寫不出代碼？手把手帶你寫100個(gè)編程真題的編程百練課程
信息學(xué)奧賽或C++選手的 必學(xué)C++課程
藍(lán)橋杯ACM、信息學(xué)奧賽的必學(xué)課程：算法競(jìng)賽課入門課程
手把手講解近五年真題的藍(lán)橋杯輔導(dǎo)課程