如何使用css3 outline屬性設計元素輪廓

這篇文章主要為大家展示了“如何使用css3 outline屬性設計元素輪廓”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“如何使用css3 outline屬性設計元素輪廓”這篇文章吧。

css3定義輪廓線

    outline屬性可以定義塊元素的外輪廓線。

    在元素周圍繪制一條輪廓線，可以起到突出元素的作用。例如，可以在原本沒有邊框的radio單選框外圍加上一條輪廓線，使其在頁面上顯得更加突出，也可以在一組radio單選框中只對某個單選框加上輪廓線，使其區別于別的單選框。

    outline屬性初始值根據具體的元素而定，它適用于所有元素。取值簡單說明如下。

       <outline-color>：定義輪廓邊框顏色。 

       <outline-style>：定義輪廓邊框輪廓。

       <outline-width>：定義輪廓邊框寬度。

       <outline-offset>：定義輪廓邊框偏移位置的數值。

        inherit:默認繼承。

    外輪廓線可能是非矩形的。例如，如果元素被分割在好幾行，那么外輪廓線就至少是能要包含該元素所有框的外廓。和邊框不同的是，外廓在線框的起訖端都不是開放的，它總是完全閉合的。

    CSS3在outline屬性基礎上派生了4個外輪廓線屬性，簡單說明如下。

      outline-color：定義輪廓邊框顏色。outline-color屬性接受所有的顏色，還包括關鍵字invert。invert應該在屏幕上對像素點顏色進行一次反轉。這個技巧保證焦點框可見，而不管背景顏

    色是什么。

      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、outline-width和outline-color屬性值。注意，外輪廓線在各邊都是一樣的，這與邊框不同，沒有outline-top或outline-left屬性。CSS不支持定義多

個互相覆蓋的外輪廓線，也沒有定義如何定義因在其他元素之后而有部分不可見的框的外輪廓線。

    焦點是文檔中用戶交互的主題（如輸入文本、選擇一個按鈕等），圖形化的用戶界面可以使用元素周圍的外輪廓線來告訴用戶頁面上哪個元素獲得了焦點。這些外輪廓線是不同于任何邊框樣式的，切換外輪廓線的顯示和不顯示都不會使文檔流發生變化。瀏覽器如果支持交互媒介組，則必須跟蹤焦點位置，而且必須顯示焦點。這個可以通過動態外輪廓線和：focus偽類的聯合使用完成。

    看下面的示例，在一個元素獲得焦點時在周圍畫一個粗實線外輪廓線，而在它活動時也畫一個不同色的

粗實線外輪廓線，從而提高用戶交互效果，如圖所示：

css3定義輪廓線寬度：

      outline-width屬性可以單獨設置外輪廓線的寬度。

      outline-width屬性初始值為medium，適用于所有元素。取值簡單說明如下。

      thin:定義細輪廓。

      medium:定義中等輪廓。

      thick:定義粗輪廓。

    <length>：定義輪廓粗細的值。

      inherit:默認繼承。

css3定義輪廓線樣式

outline-style屬性可以設置外輪廓線的樣式。

outline-style屬性初始值為none，適用于所有元素。取值簡單說明如下。

  auto:根據瀏覽器自動設置。

  <border-style>：沿用邊框樣式。包括none、dotted、dashed、solid、double、groove、mset和outset。

  inherit:默認繼承。

該屬性的瀏覽器兼容性與outline-width屬性相同。

css3定義輪廓線顏色

    outline- color屬性可以單獨設置外輪廓線的顏色。

    outline-color屬性初始值為invert，適用于所有元素。取值簡單說明如下。

    <color>:可以是顏色名，如red；函數值，如rgb(255，0，0);或者十六進制值，如#ff0000。

      invert：執行顏色反轉（逆向的顏色）。這樣可以碗保外輪廓線在不同的背景顏色中都是可見的。

      inherit:默認繼承。

css3定義輪廓線位移

    outline-offset屬性可以單獨設置外輪廓線的偏移位置。

    outline-offset屬性初始值為0，適用于所有元素。取值簡單說明如下。

    <length>：定義輪廓距離容器的值。

      inherit:默認繼承。

    該屬性的瀏覽器兼容性與outline-width屬性相同。

以上是“如何使用css3 outline屬性設計元素輪廓”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！