在表單的學(xué)習(xí)中，細(xì)心的同學(xué)發(fā)現(xiàn)了，當(dāng)前密碼框控件獲得焦點(diǎn)時(shí)，瀏覽器默認(rèn)會(huì)給它一個(gè)藍(lán)色的輪廓，提高用戶輸入信息的體驗(yàn)。

　　這個(gè)輪廓線是通過給 input 元素添加 border 邊框?qū)崿F(xiàn)的嗎?仔細(xì)觀察，輪廓線向外延伸了，但是父元素 div 的高度并沒有發(fā)生變化。可見，這個(gè)輪廓線不是通過 border 實(shí)現(xiàn)的。

　　實(shí)際上，這個(gè)效果是通過 CSS 輪廓來實(shí)現(xiàn)的。輪廓，是在元素周圍畫的一條線，在邊框之外，使元素視覺上 "突出" 顯示。

　　CSS輪廓屬性包括：outline-style 輪廓樣式、outline-color 輪廓顏色、outline-width 輪廓寬度、outline-offset 輪廓偏移、outline 輪廓簡(jiǎn)寫。

　　首先學(xué)習(xí)一下 outline-style 輪廓線樣式屬性，它的值有：

　　dotted - 定義一個(gè)點(diǎn)狀輪廓。

　　dashed - 定義一個(gè)虛線輪廓。

　　solid - 定義一個(gè)實(shí)線輪廓。

　　double - 定義一個(gè)雙線輪廓。

　　none - 表示無(wú)輪廓。

　　hidden - 定義一個(gè)隱藏的輪廓。

　　在這個(gè)已有的 HTML 文件里添加四個(gè) p 元素，分別定義 class 屬性值為 a，b，c，d。填入一些文本。再創(chuàng)建一個(gè) outline-style.css 文件，在 html 中引入樣式文件。

　　在CSS中，定義 p 選擇器，聲明樣式：border: 5px solid #4CAF50。定義 p.a 選擇器，聲明樣式 outline-style: dotted。定義 p.b 選擇器，聲明樣式 outline-style: dashed。定義 p.c 選擇器，聲明樣式 outline-style: solid。定義 p.d 選擇器，聲明樣式 outline-style: double。

HTML

<p class="a">

    一個(gè)點(diǎn)狀輪廓

</p>

<p class="b">

    一個(gè)虛線輪廓

</p>

<p class="c">

    一個(gè)實(shí)線輪廓

</p>

<p class="d">

    一個(gè)雙線輪廓

</p>

CSS

p {

  border: 5px solid #4CAF50;

}

p.a {

  outline-style: dotted;

}

p.b {

  outline-style: dashed;

}

p.c {

  outline-style: solid;

}

p.d {

  outline-style: double;

}

　　我們看，綠色邊框外的輪廓線就呈現(xiàn)出來了!

　　接下來學(xué)習(xí) outline-width 輪廓線寬度屬性，它的值有：

　　thin：一般為1px。

　　medium：一般為3px。[?mi?di?m]

　　thick：一般為5px。[θ?k]

　　一個(gè)特定的尺寸：以 px、em 為單位。比如 10px。

　　給 p.a 添加樣式 outline-width: 20px，給 p.b 添加樣式 outline-width: thick，給 p.c 添加樣式 outline-width: medium，給 p.d 添加樣式 outline-width: thin。

　　這樣，四條輪廓線都有了寬度。

　　你肯定發(fā)現(xiàn)了問題，第一個(gè)段落輪廓覆蓋了其他元素，但是元素的高度并沒有發(fā)生變化，這就是輪廓與邊框不同的地方!輪廓是在元素的邊框之外繪制的，并且可能與其他內(nèi)容重疊。輪廓不是元素尺寸的一部分，元素的總寬度和高度不受輪廓寬度的影響。

　　接下來學(xué)習(xí) outline-color 輪廓線顏色屬性，它的值可以是顏色名稱、十六進(jìn)制顏色值或RGB顏色值。

　　給 p.b 添加樣式 outline-color: red，

　　給 p.c 添加樣式 outline-color: blue，

　　給 p.d 添加樣式 outline-color: grey。

　　我們看，輪廓線有了顏色!

　　和邊框一樣，輪廓也可以應(yīng)用屬性簡(jiǎn)寫：outline。它用于設(shè)置 outline-width，outline-style，outline-color 三個(gè)屬性，其中 outline-style 必須設(shè)置。

　　我們用 outlline 屬性修改一下輪廓樣式。

　　第一段落輪廓線樣式改為 outline: dotted 20px。

　　第二個(gè)改為 outline: dashed thick red。

　　第三個(gè)改為 outline: solid medium blue。

　　第四個(gè)改為 outline: double thin grey。

　　再看一下，輪廓線效果是一樣的!

　　最后，我們學(xué)習(xí)輪廓線最后一個(gè)屬性 outline-offset，它用來設(shè)置輪廓和元素之間的空隙，這個(gè)空隙是透明的。

　　比如，給 p.c 添加樣式 outline-offset: 5px。

　　此時(shí)，這里就有了 5 像素的空隙。

上一篇

什么是CSS列表？

下一篇

ArrayList和List的主要區(qū)別