CSS 輪廓
輪廓outline處在邊框邊界的外面，它不像邊框那樣參與到文檔流中，因此輪廓出現(xiàn)或消失時(shí)不會(huì)影響文檔流，即不會(huì)導(dǎo)致文檔的重新顯示。
輪廓（outline）是繪制于元素周?chē)囊粭l線(xiàn)，位于邊框邊緣的外圍，可起到突出元素的作用。
輪廓樣式
與邊框類(lèi)似，輪廓最基本的方面是樣式，如果一個(gè)輪廓沒(méi)有樣式，輪廓將根本不會(huì)存在。與邊框不同的是，值少了一個(gè)hidden
outline-style
值: none | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit
初始值: none
應(yīng)用于: 所有元素
繼承性: 無(wú)
輪廓寬度
與邊框類(lèi)似，輪廓寬度不能為負(fù)數(shù)，也不能指定為百分比值
outline-width
值: thin | medium | thick | <length> | inherit
初始值: medium
應(yīng)用于: 所有元素
繼承性: 無(wú)
[注意]如果輪廓的樣式是none，則輪廓寬度計(jì)算值為0
輪廓顏色
與邊框不同，輪廓顏色有關(guān)鍵字invert反色輪廓，代表對(duì)輪廓所在的像素完全反色轉(zhuǎn)換，使輪廓在不同的背景顏色中都可見(jiàn)。但實(shí)際上invert關(guān)鍵字只有IE瀏覽器支持，其他瀏覽器的輪廓顏色是元素本身的前景色
outline-color
值: <color> | invert | inherit
初始值:?invert(IE)、前景色(其他瀏覽器)
應(yīng)用于: 所有元素
繼承性: 無(wú)
輪廓偏移
輪廓偏移用來(lái)定義輪廓的偏移位置的數(shù)值。當(dāng)參數(shù)值為正數(shù)時(shí)，表示輪廓向外偏移；當(dāng)參數(shù)值為負(fù)值時(shí)，表示輪廓向內(nèi)偏移
[注意]IE瀏覽器不支持
outline-offset
值: length | inherit
初始值: 0
應(yīng)用于: 所有元素
繼承性: 無(wú)
輪廓簡(jiǎn)寫(xiě)
輪廓outline類(lèi)似于邊框樣式的border屬性，允許一次完成輪廓樣式、寬度和顏色的設(shè)置。由于給定輪廓必須采用某種統(tǒng)一的樣式、寬度和顏色，所以outline是關(guān)于輪廓的唯一簡(jiǎn)寫(xiě)屬性。對(duì)于輪廓沒(méi)有諸如outline-top或outline-right之類(lèi)的屬性
[注意]outline中并沒(méi)有包括outline-offset，需要對(duì)outline-offset進(jìn)行單獨(dú)設(shè)置
outline
值: [<outline-color> || <outline-style> || <outline-width>] | inherit
初始值: 無(wú)
應(yīng)用于: 所有元素
繼承性: 無(wú)
實(shí)例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>輪廓案例</title>
<style>
p {border:1px solid yellow;}
p.dotted {outline-style:dotted;}
p.dashed {outline-style:dashed;}
p.solid {outline-style:solid;}
p.double {outline-style:double;}
p.groove {outline-style:groove;}
p.ridge {outline-style:ridge;}
p.inset {outline-style:inset;}
p.outset {outline-style:outset;}
</style>
</head>
<body>
<p class="dotted">點(diǎn)線(xiàn)輪廓</p>
<p class="dashed">虛線(xiàn)輪廓</p>
<p class="solid">實(shí)線(xiàn)輪廓</p>
<p class="double">雙線(xiàn)輪廓</p>
<p class="groove">凹槽輪廓</p>
<p class="ridge">壟狀輪廓</p>
<p class="inset">嵌入輪廓</p>
<p class="outset">外凸輪廓</p>
</body>
</html>
