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