CSS輪廓outline用法詳解

前面的話

　　輪廓outline處在邊框邊界的外面，它不像邊框那樣參與到文檔流中，因此輪廓出現或消失時不會影響文檔流，即不會導致文檔的重新顯示。利用輪廓，瀏覽器可以合并部分輪廓，建立一個連續但非矩形的形狀。預設地，輪廓是一個動態樣式，只有元素擷取到焦點或被啟用時呈現

　　[注意]IE7-瀏覽器不支援

輪廓樣式

　　與邊框類似，輪廓最基本的方面是樣式，如果一個輪廓沒有樣式，輪廓將根本不會存在。與邊框不同的是，值少了一個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

　　初始值: 無

　　應用於: 所有元素

　　繼承性: 無

應用

　　由於輪廓outline不影響元素的盒模型大小，不影響頁面配置，所以可以用outline模仿border邊框效果。但如果是圓角邊框就不是那麼好辦了。

　　firefox瀏覽器支援私人屬性-moz-outline-radius來設定輪廓圓角。該屬性對應的js寫法是MozOutlineRadius

　　對於其他瀏覽器，我們可以使用其他屬性實作類別似效果。box-shadow與border-radius屬性一脈相承，也就是說如果border-radius是圓角，則box-shadow的投影也是圓角

<p class="show">測試內容</p>

.show{    margin: 50px;    width: 100px;    height: 100px;    background-color: pink;    border-radius : 1px;    box-shadow: 0 0 0 30px lightblue;}