萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> DivCSS教程 >> 利用CSS3實現圓角的outline效果的教程

利用CSS3實現圓角的outline效果的教程

   一、首先,outline是個很牛的東西

  1. border近親

  outline和border是近親,為什麼這麼講呢?首先,都是給元素外面套框框的;其次,支持的屬性值幾乎都是一樣的,例如,outline-style和border-style值dotted, dashed, solid, ...之類的,一些語法也幾乎一樣。如果這都不算近親,你讓絕對定位和浮動何言以對。

  2. IE8+支持

  outline嚴格來講屬於CSS3屬性,但是IE8+浏覽器就支持了。外掛一句,IE9+浏覽器的outline還支持invert,專門針對outline-color. 所以,如果你的項目不用管IE6/IE7浏覽器,可以把outline掛在心中,有時候說不定會幫忙。

  3. 不占據空間

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

  4. 直角!圓角?

  正好承上啟下一下。

  二、outline的直角與圓角

  現有此效果一枚:

201565181054236.png (167×125)

  一排60*60像素的直角圖片,選中的圖片外框2像素帶圓角高亮。浏覽器兼容要求,IE9+以及其他現代浏覽器。

  一般而言,我們的第一反應是使用border + border-radius。但是,有個問題,就是,這裡的外部高亮邊框效果是外擴的,要知道,border是會增加元素的尺寸的,於是,為了我們的完美對齊效果,還需要對選中元素做重定位,上下左右的margin值都需要改變。我丟,想想就煩!

  像這種UI表現,天生就是outline干的事情。於是,我們大手一揮:

  CSS Code復制內容到剪貼板

  outline: 2px solid #26C2A7;

201565181124166.jpg (92×87)

  高亮的邊框在哪裡?在這裡在這裡!

201565181147589.jpg (236×150)

  但是,不是圓角啊!

  親愛的朋友,千萬不要妄圖通過border-radius來改變outline的圓角,要知道,outline跟border是近親,穿一個開裆褲長大的。但是,媳婦可不能共享哈!border-radius和border是登記在案的光明夫妻,看,連姓氏都隨了夫君了,人家只認border, 你outline沒戲,找自己的媳婦止渴去。

  但是,outline貌似是個單身狗,沒有媳婦啊,難道outline注定一輩子直角,掰不彎了?

  三、outline的圓角效果

  茫茫CSS海,乍一看去,貌似沒有能讓outline圓角的東西。注意措辭,“貌似”,我們如果有雙犀利的眼睛,還是會發現某處藏可以讓outline圓角的東西。

  在FireFox浏覽器中,就有和outline匹對的圓角夫妻outline-radius,

  其關系,就和border和border-radius的關系一樣。

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

  聞名不如見面,若是火狐,您可以狠狠地點擊這裡:FireFox下outline radius圓角效果Demo

  效果如下截圖:

201565181317166.png (406×342)

  相關CSS代碼如下:

  CSS Code復制內容到剪貼板

  img {

  outline: 30px solid #cd0000;

  -moz-outline-radius: 30px;

  }

  是不是很松松啊!如果你觀察足夠仔細,會發現,outline-radius和border-radius還是有區別的?看出來沒,區別在哪裡?答對有獎……哈,沒錯,你們都答錯了!沒有任何區別,outline-radius的圓角規則、語法之類跟border-radius就是一樣的。

  唯一的區別,也就是兼容性問題,不是看出來的,是試出來的。告訴大家一個不幸的消息,目前,除了FireFox浏覽器支持outline-radius,其他浏覽器都是空大屁!

  如果是僅webkit/blink浏覽器支持還好說,至少移動端還可以用用,搞了個僅僅FireFox支持,玩毛線啊!不對,連毛線都沒得玩!

  親,不要絕望啊,車到山前必有路,此路進去……

  四、box-shadow模擬outline的圓角效果

  outline-radius雖然沒戲了,但是,我們可以使用其他屬性,可以實現類似的效果,比方說,圖形構建大神之一的box-shadow.

  我們平時使用box-shadow最多的是前面3個參數,水平/垂直偏移以及模糊大小,可能有一些小伙伴並不清楚其第4個可選參數值究竟有何用?box-shadow第4個參數值,名外擴展,可以把投影范圍擴大,當然,擴大的區域是實色區域。我們就可以利用這一特性,模擬實現不影響元素占據尺寸的outline實色邊框效果啦!

  實例先行,您可以狠狠地點擊這裡:CSS3 box-shadow模擬outline radius圓角Demo

  CSS代碼如下:

  CSS Code復制內容到剪貼板

  img {

  border-radius: 1px;

  box-shadow: 0 0 0 30px #cd0000;

  }

  CSS3用的多的小伙伴應該知道,box-shadow的投影形狀與border-radius一脈相承,也就是border-radius是圓角的,box-shadow的投影也是圓弧形的。於是,我們這裡最終的效果就如下圖所示:

201565181416656.png (448×344)

  下面簡單解釋下兩行CSS代碼的含義:

  border-radius: 1px表示圓角大小1像素。有同學可能奇怪了,怎麼是1像素啊,截圖圓角明明好幾十像素,下面正好就解釋了;

  box-shadow: 0 0 0 30px #cd0000出現了4個數值,分別是水平偏移0, 垂直偏移0,模糊0(純色), 擴展大小30像素。我們可以想象成,光線直接從盒子的正上方照下來,因為沒有偏移沒有模糊,我們看不到任何陰影。實際上,盒子的陰影正好就是盒子的大小(外帶1像素圓角),此時,擴展30像素,我們可以腦補一下,1像素圓角的陰影再擴展30像素。喲,不就是我們需要的效果嘛,不就是截圖展示的效果嘛!

  知道border-radius 1像素的左右了吧,擴展30像素後,圓角就是30像素大小了。

  然而,雖然肉眼看不出來,上面的方法實際有瑕疵,因為圖片不是純正的直角,有1像素的圓角。如果你想實現完美的內方外圓的效果,可以套一層標簽,外面的標簽使用border-radius和box-shadow就可以了。

copyright © 萬盛學電腦網 all rights reserved