1、使用css3 outline屬性設計元素輪廓有些時候，我們可能希翼在可視對象。如按鈕、活動窗體域、圖形地圖等，周圍添加一圈外部輪廓線，使對象突出顯示。固然這里的外輪廓線與元素邊框是不同的，外輪廓線不占用網頁布局空間，且不一定是矩形，外輪廓線屬于動態樣式，惟獨當對象獵取焦點或者被激活時展現。 css3定義輪廓線 outline屬性可以定義塊元素的外輪廓線。 在元素周圍繪制一條輪廓線，可以起到突出元素的作用。例如，可以在原本沒有邊框的radio單選框外圍加上一條輪廓線，使其在頁面上顯得越發突出，也可以在一組radio單選框中只對某個單選框加上輪廓線，使其區分于別的單選框。 outline屬性初始值

2、按照詳細的元素而定，它適用于全部元素。取值容易解釋如下。 ：定義輪廓邊框色彩。 ：定義輪廓邊框輪廓。 ：定義輪廓邊框寬度。 ：定義輪廓邊框偏移位置的數值。 inherit:默認繼承。 外輪廓線可能是非矩形的。例如，假如元素被分割在好幾行，那么外輪廓線就起碼是能要包含該元素全部框的外廓。和邊框不同的是，外廓在線框的起訖端都不是開放的，它總是徹低閉合的。 css3在outline屬性基礎上派生了4個外輪廓線屬性，容易解釋如下。 outline-color：定義輪廓邊框色彩。outline-color屬性接受全部的色彩，還包括關鍵字invert。invert應當在屏幕上對像素點色彩舉行一次反轉。這個

3、技巧保證焦點框可見，而不管背景顏 色是什么。 outline-style：定義輪廓邊框輪廓。outline-style屬性與border-style屬性接受值和使用相同， 如none、dotted、dashed、solid、double、groove、ridge、inset和outset。但是，hidden屬性 值并不是一個合法的外輪廓樣式。 outline-width：定義輪廓邊框寬度。outline-width屬性與border-width屬性接受值和使用相同。 outline-offset：定義輪廓邊框偏移位置的數值。 outline屬性是個復合屬性，可以設置outline-style、

4、outline-width和outline-color屬性值。注重，外輪廓線在各邊都是一樣的，這與邊框不同，沒有outline-top或outline-left屬性。css不支持定義多 個相互籠罩的外輪廓線，也沒有定義如何定義因在其他元素之后而有部分不行見的框的外輪廓線。 焦點是文檔中用戶交互的主題（如輸入文本、挑選一個按鈕等），圖形化的用戶界面可以用法元素周圍的外輪廓線來告知用戶頁面上哪個元素獲得了焦點。這些外輪廓線是不同于任何邊框樣式的，切換外輪廓線的顯示和不顯示都不會使文檔流發生變幻。掃瞄器假如支持交互媒介組，則必需跟蹤焦點位置，而且必需顯示焦點。這個可以通過動態外輪廓線和：focus偽

5、類的聯合用法完成。 看下面的示例，在一個元素獲得焦點時在周圍畫一個粗實線外輪廓線，而在它活動時也畫一個不同色的 粗實線外輪廓線，從而提高用戶交互效果， css3定義輪廓線寬度： outline-width屬性可以單獨設置外輪廓線的寬度。 outline-width屬性初始值為medium，適用于全部元素。取值容易解釋如下。 thin:定義細輪廓。 medium:定義中等輪廓。 thick:定義粗輪廓。 ：定義輪廓粗細的值。 inherit:默認繼承。 css3定義輪廓線樣式 outline-style屬性可以設置外輪廓線的樣式。 outline-style屬性初始值為none，適用于全部元素。

6、取值容易解釋如下。 auto:按照掃瞄器自動設置。 ：沿用邊框樣式。包括none、dotted、dashed、solid、double、groove、mset和outset。 inherit:默認繼承。 該屬性的掃瞄器兼容性與outline-width屬性相同。 css3定義輪廓線色彩 outline- color屬性可以單獨設置外輪廓線的色彩。 outline-color屬性初始值為invert，適用于全部元素。取值容易解釋如下。 :可以是色彩名，如red；函數值，如rgb(255，0，0);或者十六進制值，如ff0000。 invert：執行色彩反轉（逆向的色彩）。這樣可以碗保外輪廓線在不同的背景色彩中都是可見的。 inherit:默認繼承。 css3定義輪廓線位移 outline-offset屬性可以單獨設置外輪廓線的偏移位置。 outline-offset屬性初始值為0，適用于全部元素。取值容易解釋如下。 ：定義輪廓距離容