單元素利用css實(shí)現(xiàn)多重邊框效果示例代碼

發(fā)布時(shí)間：2017-09-18 15:25:53 作者：璿而不華

邊框操作是每位前端工程師們經(jīng)常會(huì)遇到的，下面這篇文章主要給大家介紹了關(guān)于單元素如何利用css實(shí)現(xiàn)多重邊框效果的相關(guān)資料，文中通過(guò)示例代碼給大家詳細(xì)介紹了實(shí)現(xiàn)的過(guò)程，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)下吧。

前言

最近在工作中遇到一個(gè)值得思考的問(wèn)題，在CSS中，要實(shí)現(xiàn)同一種效果可能有很多種方式，就比如今天所要講的多重邊框，有人可能會(huì)想，那還不簡(jiǎn)單？要多少邊框直接嵌套多少個(gè)帶邊框的DIV元素不就行了么！

是的，這樣確實(shí)簡(jiǎn)單粗暴，但是也會(huì)因此產(chǎn)生很多毫無(wú)實(shí)際意義的元素。

事實(shí)上，要實(shí)現(xiàn)同樣效果，一個(gè)元素足矣！

接下來(lái)我將給大家分享單元素如何實(shí)現(xiàn)多重邊框效果~~

一、雙重邊框效果

<!--HTML-->
<div class="box"></div>

/*CSS*/
.box{ width: 200px; height: 200px; border: 10px double #000;}

使用border-style: double就可實(shí)現(xiàn)簡(jiǎn)單的雙重邊框效果，實(shí)現(xiàn)效果如下：

border-style: double

實(shí)現(xiàn)方法雖然簡(jiǎn)單，但是缺點(diǎn)也是非常明顯：

① 無(wú)法精確控制雙重邊框的粗細(xì)及之間的間隔；

② 無(wú)法改變雙重邊框的樣式，比如雙重虛線邊框；

③ 無(wú)法實(shí)現(xiàn)更多層次的邊框效果。

二、雙重多樣化邊框效果

/*CSS*/
.box{ width: 200px; height: 200px; border: 1px solid #000; outline: 1px dashed #f00; outline-offset: 10px;}

對(duì)于outline屬性，我們平時(shí)用得比較少，其代表元素的外輪廓，顯示于邊框外圍，大多數(shù)情況似乎都只是用于清除表單控件的默認(rèn)focus樣式：outline: none;

而事實(shí)上，outline可以制作出與border屬性近乎相同的效果，而且寫(xiě)法上也幾乎沒(méi)有差別，但是這里還是大概講講這兩者存在的細(xì)微差別：

① outline不占據(jù)實(shí)際空間大小，這一點(diǎn)與box-shadow很像；

② outline不能像border一樣拆分成border-left、border-right等屬性；

③ outline不能設(shè)置圓角。

上面例子中還用到了outline-offset屬性，這個(gè)屬性其實(shí)是outline在CSS3中新加的屬性，該屬性不能合并簡(jiǎn)寫(xiě)在outline中，用于控制外邊框與外輪廓之間的距離。

outline屬性

這個(gè)實(shí)現(xiàn)方法也很簡(jiǎn)單，而且更加靈活，但是也存在幾個(gè)缺點(diǎn)：

① outline屬性無(wú)法設(shè)置圓角（火狐下可以設(shè)置-moz-outline-radius屬性來(lái)實(shí)現(xiàn)圓角，只可惜其他瀏覽器下并無(wú)此屬性），所以圓角雙重邊框無(wú)法實(shí)現(xiàn)；

② 同樣無(wú)法實(shí)現(xiàn)更多層次的邊框效果。

三、多重多樣化邊框效果

/*CSS*/
.box{ width: 200px; height: 200px; border: 10px solid #000; border-radius: 10px; box-shadow: 0 0 0 10px #f00, 0 0 0 20px #0f0, 0 0 0 30px #00f;}

這里使用了box-shadow屬性來(lái)替代outline屬性，多重陰影效果疊加可以實(shí)現(xiàn)無(wú)數(shù)層邊框效果，與此同時(shí)也能使用圓角屬性border-radius來(lái)實(shí)現(xiàn)多重圓角邊框效果。

box-shadow屬性

此實(shí)現(xiàn)方式雖然看起來(lái)已經(jīng)達(dá)到了我們最初想要實(shí)現(xiàn)的效果，但是該方法存在著一個(gè)非常顯著的缺點(diǎn)，那就是無(wú)法像outline或border一樣設(shè)置虛線邊框，所以使用該方法是無(wú)法實(shí)現(xiàn)多重虛線邊框效果的。

兼容性： border當(dāng)然兼容性是最好的；其次是outline，可以兼容到IE8，但是outline-offset在IE下全軍覆沒(méi)；最后是box-shadow，可以兼容到IE9。

結(jié)束語(yǔ)

本文所介紹的方法各有各自的優(yōu)缺點(diǎn)，在實(shí)際運(yùn)用當(dāng)中可以根據(jù)運(yùn)用場(chǎng)景靈活選擇，當(dāng)然，除了以上所寫(xiě)的三種方法之外，我們還可以結(jié)合偽元素來(lái)實(shí)現(xiàn)多重邊框，其實(shí)最終實(shí)現(xiàn)原理還是本文的這幾種方法，關(guān)于偽元素，你可以看看寫(xiě)的偽元素::before與::after的用法這篇文章。

好了，以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。