CSS3外輪廓屬性
外輪廓outline在頁面中呈現的效果和邊框border呈現的效果極其相似，但和元素邊框border完全不同，外輪廓線不佔用網頁布局空間，不一定是矩形，外輪廓是屬於一種動態樣式，只有元素獲取到焦點或者被激活時呈現。
outline屬性早在CSS2中就出現了，主要是用來在元素周圍繪制一條輪廓線，可以起到突出元素的作用。
但是並未得到各主流瀏覽器的廣泛支持，在CSS3中對outline作了一定的擴展，在以前的基礎上增加新特性。
outline屬性的基本語法如下：
outline: ［outline-color］ || [outline-style] || [outline-width] || [outline-offset] || inherit
從語法中可以看出outline和border邊框屬性的使用方法極其類似。
outline-color相當於border-color、outline-style相當於border-style，而outline-width相當於border-width，只不過CSS3給outline屬性增加了一個outline-offset屬性，其取值說明如下。
| 屬性值 | 屬性值說明 |
| outline-color | 定義輪廓線的顔色，屬性值爲CSS中定義的顔色值。在實際應用中，可以將此參數省略，省略時此參數的默認值爲黑色。 |
| outline-style | 定義輪廓線的樣式，屬性爲CSS中定義線的樣式。在實際應用中，可以將此參數省略，省略時此參數的默認值爲none，省略後不對該輪廓線進行任何繪制。 |
| outline-width | 定義輪廓線的寬度，屬性值可以爲一個寬度值。在實際應用中，可以將此參數省略，省略時此參數的默認值爲medium，表示繪制中等寬度的輪廓線。 |
| outline-offset | 定義輪廓邊框的偏移位置的數值，此值可以取負數值。當此參數的值爲正數值，表示輪廓邊框向外偏移多少個像素；當此參數的值爲負數值，表示輪廓邊框向内偏移多少個像素。 |
| inherit | 元素繼承父元素的outlind效果。 |
制作雙色邊框效果。
index.html代碼：
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS3外輪廓屬性</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div></div> </body> </html>
style.css代碼：
div {
padding:20px;
margin:30px;
outline:red solid 2px;
boder:2px solid green;
}
