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的投影也是圓角

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

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