css中 outline 的使用

CSS中outline屬性是繪製於元素周圍的一條線，位於邊框邊緣的外圍，可起到突出元素的做用。

例如：在瀏覽器裏，當鼠標點擊或使用Tab鍵讓一個連接或者一個radio得到焦點的時候，該元素將會被一個輪廓虛線框圍繞。這個輪廓虛線框就是outline 。

 

1、outline能夠按順序設置以下屬性

outline-color ：設置元素輪廓的顏色，其取值與border-color相似。只有當outline-style不爲none時纔有效。默認爲transparent。

outline-style ：設置元素輪廓的格式，其取值與border-style相似，但沒有hidden值。默認爲none，無輪廓。

outline-width：設置元素輪廓的寬度，其取值與border-width相似。只有當outline-style不爲none時纔有效。

若是不設置其中的某個值，也不會出問題，好比 outline:solid #ff0000; 也是容許的

 

2、outline與border的區別

1.outline是不佔空間的，既不會增長額外的width或者height
2.outline有多是非矩形的

3、outline的層級順序

一、outline在不一樣的格式化上下文呈現是不同的，在塊級元素裏面是能夠覆蓋上下兩邊的內容的。在內聯元素之能夠覆蓋上面的內容。

二、一般狀況下outline會按照後面覆蓋前面的順序正常顯示（同等狀況下，如同在文檔流裏面都沒有浮動，或者都是浮動，定位的有z-index不算）

三、若是頁面有浮動元素，則先顯示浮動元素的outline，再顯示正常文檔流的outline（浮動元素的outline被沒有浮動元素的outline覆蓋）

四、若是頁面有定位元素（relative，absolute，fixed不包括static），則在顯示浮動元素以後，顯示正常的文檔流，以後再顯示定位的元素（不設置z-index狀況下，設置的話等於瀏覽器又執行了其餘命令），固然定位的元素能夠用z-index屬性把元素在先後挪來挪去，不過如今討論的是在不設置z-index下默認瀏覽器對outline的顯示狀況。

參考資料：  css中outline   http://www.studyofnet.com/news/995.html