如何使用css3 outline屬性設(shè)計(jì)元素輪廓

這篇文章主要為大家展示了“如何使用css3 outline屬性設(shè)計(jì)元素輪廓”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“如何使用css3 outline屬性設(shè)計(jì)元素輪廓”這篇文章吧。

css3定義輪廓線

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

    在元素周?chē)L制一條輪廓線，可以起到突出元素的作用。例如，可以在原本沒(méi)有邊框的radio單選框外圍加上一條輪廓線，使其在頁(yè)面上顯得更加突出，也可以在一組radio單選框中只對(duì)某個(gè)單選框加上輪廓線，使其區(qū)別于別的單選框。

    outline屬性初始值根據(jù)具體的元素而定，它適用于所有元素。取值簡(jiǎn)單說(shuō)明如下。

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

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

       <outline-width>：定義輪廓邊框?qū)挾取?/p>

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

        inherit:默認(rèn)繼承。

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

    CSS3在outline屬性基礎(chǔ)上派生了4個(gè)外輪廓線屬性，簡(jiǎn)單說(shuō)明如下。

      outline-color：定義輪廓邊框顏色。outline-color屬性接受所有的顏色，還包括關(guān)鍵字invert。invert應(yīng)該在屏幕上對(duì)像素點(diǎn)顏色進(jìn)行一次反轉(zhuǎn)。這個(gè)技巧保證焦點(diǎn)框可見(jiàn)，而不管背景顏

    色是什么。

      outline-style：定義輪廓邊框輪廓。outline-style屬性與border-style屬性接受值和用法相同， 如none、dotted、dashed、solid、double、groove、ridge、inset和outset。但是，hidden屬性

    值并不是一個(gè)合法的外輪廓樣式。

      outline-width：定義輪廓邊框?qū)挾取utline-width屬性與border-width屬性接受值和用法相同。

      outline-offset：定義輪廓邊框偏移位置的數(shù)值。

    outline屬性是個(gè)復(fù)合屬性，可以設(shè)置outline-style、outline-width和outline-color屬性值。注意，外輪廓線在各邊都是一樣的，這與邊框不同，沒(méi)有outline-top或outline-left屬性。CSS不支持定義多

個(gè)互相覆蓋的外輪廓線，也沒(méi)有定義如何定義因在其他元素之后而有部分不可見(jiàn)的框的外輪廓線。

    焦點(diǎn)是文檔中用戶交互的主題（如輸入文本、選擇一個(gè)按鈕等），圖形化的用戶界面可以使用元素周?chē)耐廨喞€來(lái)告訴用戶頁(yè)面上哪個(gè)元素獲得了焦點(diǎn)。這些外輪廓線是不同于任何邊框樣式的，切換外輪廓線的顯示和不顯示都不會(huì)使文檔流發(fā)生變化。瀏覽器如果支持交互媒介組，則必須跟蹤焦點(diǎn)位置，而且必須顯示焦點(diǎn)。這個(gè)可以通過(guò)動(dòng)態(tài)外輪廓線和：focus偽類(lèi)的聯(lián)合使用完成。

    看下面的示例，在一個(gè)元素獲得焦點(diǎn)時(shí)在周?chē)?huà)一個(gè)粗實(shí)線外輪廓線，而在它活動(dòng)時(shí)也畫(huà)一個(gè)不同色的

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

css3定義輪廓線寬度：

      outline-width屬性可以單獨(dú)設(shè)置外輪廓線的寬度。

      outline-width屬性初始值為medium，適用于所有元素。取值簡(jiǎn)單說(shuō)明如下。

      thin:定義細(xì)輪廓。

      medium:定義中等輪廓。

      thick:定義粗輪廓。

    <length>：定義輪廓粗細(xì)的值。

      inherit:默認(rèn)繼承。

css3定義輪廓線樣式

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

outline-style屬性初始值為none，適用于所有元素。取值簡(jiǎn)單說(shuō)明如下。

  auto:根據(jù)瀏覽器自動(dòng)設(shè)置。

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

  inherit:默認(rèn)繼承。

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

css3定義輪廓線顏色

    outline- color屬性可以單獨(dú)設(shè)置外輪廓線的顏色。

    outline-color屬性初始值為invert，適用于所有元素。取值簡(jiǎn)單說(shuō)明如下。

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

      invert：執(zhí)行顏色反轉(zhuǎn)（逆向的顏色）。這樣可以碗保外輪廓線在不同的背景顏色中都是可見(jiàn)的。

      inherit:默認(rèn)繼承。

css3定義輪廓線位移

    outline-offset屬性可以單獨(dú)設(shè)置外輪廓線的偏移位置。

    outline-offset屬性初始值為0，適用于所有元素。取值簡(jiǎn)單說(shuō)明如下。

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

      inherit:默認(rèn)繼承。

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

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