一、首先，outline是個(gè)很牛的東西
1. border近親
outline和border是近親，為什么這么講呢？首先，都是給元素外面套框框的；其次，支持的屬性值幾乎都是一樣的，例如，outline-style和border-style值dotted, dashed, solid, ...之類的，一些語(yǔ)法也幾乎一樣。如果這都不算近親，你讓絕對(duì)定位和浮動(dòng)何言以對(duì)。

2. IE8+支持
outline嚴(yán)格來(lái)講屬于CSS3屬性，但是IE8+瀏覽器就支持了。外掛一句，IE9+瀏覽器的outline還支持invert，專門針對(duì)outline-color. 所以，如果你的項(xiàng)目不用管IE6/IE7瀏覽器，可以把outline掛在心中，有時(shí)候說(shuō)不定會(huì)幫忙。

3. 不占據(jù)空間
默認(rèn)的盒模型下，假設(shè)元素100*100像素，我們給元素設(shè)置border:10px solid，則實(shí)際該元素占據(jù)的尺寸至少就是120*120像素，元素的偏移、布局啊什么的，就需要多多思量。但是，outline不一樣，你哪怕outline:100px solid，元素占據(jù)的尺寸還是100*100像素。這種行為表現(xiàn)，與transform以及box-shadow等CSS3屬性很類似，雖然外形豐滿了，但是，占據(jù)的真實(shí)空間沒(méi)有影響。于是，我們?cè)趯?shí)現(xiàn)一些交互效果的時(shí)候，例如hover變化，我們就可以專注于效果本身，而不用被布局所左右，是很棒的體驗(yàn)。

4. 直角！圓角？
正好承上啟下一下。
二、outline的直角與圓角

現(xiàn)有此效果一枚：

一排60*60像素的直角圖片，選中的圖片外框2像素帶圓角高亮。瀏覽器兼容要求，IE9+以及其他現(xiàn)代瀏覽器。

一般而言，我們的第一反應(yīng)是使用border + border-radius。但是，有個(gè)問(wèn)題，就是，這里的外部高亮邊框效果是外擴(kuò)的，要知道，border是會(huì)增加元素的尺寸的，于是，為了我們的完美對(duì)齊效果，還需要對(duì)選中元素做重定位，上下左右的margin值都需要改變。我丟，想想就煩！

像這種UI表現(xiàn)，天生就是outline干的事情。于是，我們大手一揮：

高亮的邊框在哪里？在這里在這里！

但是，不是圓角啊！

親愛(ài)的朋友，千萬(wàn)不要妄圖通過(guò)border-radius來(lái)改變outline的圓角，要知道，outline跟border是近親，穿一個(gè)開襠褲長(zhǎng)大的。但是，媳婦可不能共享哈！border-radius和border是登記在案的光明夫妻，看，連姓氏都隨了夫君了，人家只認(rèn)border, 你outline沒(méi)戲，找自己的媳婦止渴去。

但是，outline貌似是個(gè)單身狗，沒(méi)有媳婦啊，難道outline注定一輩子直角，掰不彎了？
三、outline的圓角效果

茫茫CSS海，乍一看去，貌似沒(méi)有能讓outline圓角的東西。注意措辭，“貌似”，我們?nèi)绻须p犀利的眼睛，還是會(huì)發(fā)現(xiàn)某處藏可以讓outline圓角的東西。

在FireFox瀏覽器中，就有和outline匹對(duì)的圓角夫妻outline-radius,

其關(guān)系，就和border和border-radius的關(guān)系一樣。

由于目前還只是FireFox瀏覽器私有的屬性，因此，目前的使用需要加-moz-前綴，也就是-moz-outline-radius.

聞名不如見面，若是火狐，您可以狠狠地點(diǎn)擊這里：FireFox下outline radius圓角效果Demo

效果如下截圖：

相關(guān)CSS代碼如下：

是不是很松松??！如果你觀察足夠仔細(xì)，會(huì)發(fā)現(xiàn)，outline-radius和border-radius還是有區(qū)別的？看出來(lái)沒(méi)，區(qū)別在哪里？答對(duì)有獎(jiǎng)……哈，沒(méi)錯(cuò)，你們都答錯(cuò)了！沒(méi)有任何區(qū)別，outline-radius的圓角規(guī)則、語(yǔ)法之類跟border-radius就是一樣的。

唯一的區(qū)別，也就是兼容性問(wèn)題，不是看出來(lái)的，是試出來(lái)的。告訴大家一個(gè)不幸的消息，目前，除了FireFox瀏覽器支持outline-radius，其他瀏覽器都是空大屁！

如果是僅webkit/blink瀏覽器支持還好說(shuō)，至少移動(dòng)端還可以用用，搞了個(gè)僅僅FireFox支持，玩毛線啊！不對(duì)，連毛線都沒(méi)得玩！

親，不要絕望啊，車到山前必有路，此路進(jìn)去……
四、box-shadow模擬outline的圓角效果

outline-radius雖然沒(méi)戲了，但是，我們可以使用其他屬性，可以實(shí)現(xiàn)類似的效果，比方說(shuō)，圖形構(gòu)建大神之一的box-shadow.

我們平時(shí)使用box-shadow最多的是前面3個(gè)參數(shù)，水平/垂直偏移以及模糊大小，可能有一些小伙伴并不清楚其第4個(gè)可選參數(shù)值究竟有何用？box-shadow第4個(gè)參數(shù)值，名外擴(kuò)展，可以把投影范圍擴(kuò)大，當(dāng)然，擴(kuò)大的區(qū)域是實(shí)色區(qū)域。我們就可以利用這一特性，模擬實(shí)現(xiàn)不影響元素占據(jù)尺寸的outline實(shí)色邊框效果啦！

實(shí)例先行，您可以狠狠地點(diǎn)擊這里：CSS3 box-shadow模擬outline radius圓角Demo

CSS代碼如下：

CSS3用的多的小伙伴應(yīng)該知道，box-shadow的投影形狀與border-radius一脈相承，也就是border-radius是圓角的，box-shadow的投影也是圓弧形的。于是，我們這里最終的效果就如下圖所示：

下面簡(jiǎn)單解釋下兩行CSS代碼的含義：

•     border-radius: 1px表示圓角大小1像素。有同學(xué)可能奇怪了，怎么是1像素啊，截圖圓角明明好幾十像素，下面正好就解釋了；
      box-shadow: 0 0 0 30px #cd0000出現(xiàn)了4個(gè)數(shù)值，分別是水平偏移0, 垂直偏移0，模糊0(純色), 擴(kuò)展大小30像素。我們可以想象成，光線直接從盒子的正上方照下來(lái)，因?yàn)闆](méi)有偏移沒(méi)有模糊，我們看不到任何陰影。實(shí)際上，盒子的陰影正好就是盒子的大?。ㄍ鈳?像素圓角），此時(shí)，擴(kuò)展30像素，我們可以腦補(bǔ)一下，1像素圓角的陰影再擴(kuò)展30像素。喲，不就是我們需要的效果嘛，不就是截圖展示的效果嘛！

    知道border-radius 1像素的左右了吧，擴(kuò)展30像素后，圓角就是30像素大小了。

然而，雖然肉眼看不出來(lái)，上面的方法實(shí)際有瑕疵，因?yàn)閳D片不是純正的直角，有1像素的圓角。如果你想實(shí)現(xiàn)完美的內(nèi)方外圓的效果，可以套一層標(biāo)簽，外面的標(biāo)簽使用border-radius和box-shadow就可以了。

最新評(píng)論