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