這篇文章主要講解了“使用CSS實(shí)現(xiàn)多邊框和透明邊框的方法”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“使用CSS實(shí)現(xiàn)多邊框和透明邊框的方法”吧！

我們提供的服務(wù)有：成都做網(wǎng)站、網(wǎng)站建設(shè)、外貿(mào)營銷網(wǎng)站建設(shè)、微信公眾號(hào)開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、云安ssl等。為超過千家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的云安網(wǎng)站制作公司

CSS多邊框

Backgrounds & Borders Level 3 還是一份草案的時(shí)候，CSS WG 就在是否支持多重邊框的問題進(jìn)行了大量的探討，就像是討論多重背景圖片一樣。不幸的是，當(dāng)時(shí)認(rèn)為多重邊框的用處并不大，即使需要也可以使用border-image屬性來模擬。不過，WG顯然忘記了在 CSS 代碼中靈活地調(diào)整邊框，才是我們需要的，現(xiàn)在開發(fā)者只能使用一些Hack手段來模擬多重邊框，比如使用多重元素的嵌套來模擬多重邊框?，F(xiàn)在，我將告訴你一些更優(yōu)秀的方法，無需使用多余的標(biāo)簽即可實(shí)現(xiàn)多重邊框。

box-shadow解決方案

現(xiàn)在，大多數(shù)的時(shí)候都用box-shadow來創(chuàng)建陰影。不過，很少有人知道它還接受第四個(gè)參數(shù)（spread），該參數(shù)可以縮放陰影的范圍。比如下面的示例，我們創(chuàng)建了一個(gè)水平和垂直偏移量為0 的陰影，它就使用了上述所說的第四個(gè)參數(shù)：

CSS Code復(fù)制內(nèi)容到剪貼板

1. background: yellowgreen;   

2. box-shadow: 0 0 0 10px #655;  

效果如下圖所示：

圖注：使用 box-shadow 模擬邊框線

這還不夠令人驚訝，因?yàn)樗臀覀兪褂?border 創(chuàng)建的邊框差不多。不過，強(qiáng)大的是我們可以使用逗號(hào)來創(chuàng)建任意數(shù)量的陰影。所以，只需要繼續(xù)添加陰影就可以實(shí)現(xiàn)多重陰影了，比如，添加一個(gè)顏色為 deeppink 的邊框：

CSS Code復(fù)制內(nèi)容到剪貼板

1. background: yellowgreen;   

2. box-shadow: 0 0 0 10px #655, 0 0 0 15px deeppink;  

唯一需要牢記的事情就是，box-shadow 屬性是疊在一起的，第一個(gè)陰影總是位于最頂層，所以你需要調(diào)整陰影的大小。比如，在上一段代碼中，我們希望最外層的邊框?yàn)?5px，那么我們就可以設(shè)置一個(gè) 15px(10px + 5px) 的陰影。如果你需要，那么就可以為指定任意層次的陰影：

CSS Code復(fù)制內(nèi)容到剪貼板

1. background: yellowgreen;   

2. box-shadow: 0 0 0 10px #655,   

3.             0 0 0 15px deeppink,   

4.             0 2px 5px 15px rgba(0,0,0,.6);  

除了下述的少數(shù)情況外，使用 box-shadow 的解決方案都很好用：

陰影并不是邊框，它們并不占有實(shí)際的空間，也不能歸屬于 box-sizing 的范圍。不過，你可以通過使用內(nèi)邊距或外邊距（取決于陰影是內(nèi)部的還是外部的）占據(jù)額外的空間來模擬。
上述示例模擬的邊框是位于元素外部的。它不能捕獲類似懸停和點(diǎn)擊的鼠標(biāo)事件。如果事件很重要，那么可以通過添加 inset 關(guān)鍵字讓陰影出現(xiàn)在元素的內(nèi)部。注意，你可能需要添加額外的內(nèi)邊距來擴(kuò)充空間。
outline的解決方案

在某些情況下，如果我們只需要兩層邊框，那么我們只需要一層常規(guī)的邊框和一層outline 就可以實(shí)現(xiàn)。這也讓我們的邊框在樣式上保持了足夠的靈活性（比如我們想要一個(gè)虛線邊框），但是使用 box-shadow 的話，我們只能模擬出實(shí)線邊框。如下圖所示：

注：使用 box-shadow 模擬兩條輪廓線

CSS Code復(fù)制內(nèi)容到剪貼板

1. background: yellowgreen;   

2. border: 10px solid #655;   

3. outline: 15px solid deeppink;  

使用 outline 的另一個(gè)好處就是，我們可以通過 outline-offset 控制 outline 到元素邊框的距離，該屬性甚至可以接受負(fù)值。這對(duì)很多效果都非常有用，如下圖所示：

*注：對(duì)于虛線樣式的輪廓線，通過給 outline-offset 設(shè)置負(fù)值，創(chuàng)建了一個(gè)基礎(chǔ)的縫紉效果 *

不過，這種方法也有一些限制：

就像起初說的那樣，這種方法只能模擬兩層邊框，因?yàn)槊總€(gè)元素只能創(chuàng)建一個(gè) outline。如果需要?jiǎng)?chuàng)建多重邊框，那么只能使用 box-shadow 的方法。
border-radius 并不能讓 outline 呈現(xiàn)圓角效果，所以，即使你的邊框是圓角的，outline 仍然是直角的（如下圖所示）。注意，CSS WG 認(rèn)為這是一個(gè) bug，在未來border-radius可能可以將 outline 變?yōu)閳A角。
根據(jù) CSS User Interface Level 3 specification 的說法：“outliens 可能并不是矩形。”雖然大多數(shù)情況下它看起來像是矩形，但是在你使用這一方法時(shí)，還是需要進(jìn)行跨瀏覽器測試的。

圖注：通過outline創(chuàng)建的輪廓線并沒有貼合元素的圓角，這個(gè)問題在未來可能會(huì)被修正

border-colors解決方案

border-colors是一個(gè)獨(dú)特的屬性，從字面上來說就是為多邊框而生，只可惜的是，到目前為止這僅是Gecko內(nèi)核瀏覽器獨(dú)有的屬性。

如果不追究瀏覽器的兼容性，那么border-colors也可以實(shí)現(xiàn)多邊框的效果。在具體使用時(shí)，需要分成四邊邊框來寫：

CSS Code復(fù)制內(nèi)容到剪貼板

1. -moz-border-top-colors:   *; /*頂邊邊框*/  

2. -moz-border-right-colors:  *; /*右邊邊框*/  

3. -moz-border-bottom-colors:   *; /*底邊邊框*/  

4. -moz-border-left-colors:   *; /*左邊邊框*/  

雖然這種方式也能實(shí)現(xiàn)多邊框效果，但相比前兩種解決方案而言要麻煩一些,來看一個(gè)簡單示例：

CSS Code復(fù)制內(nèi)容到剪貼板

1. border: 10px solid;   

2. -moz-border-top-colors: red red red red green green green blue blue blue;   

3. -moz-border-bottom-colors: red red red red green green green blue blue blue;   

4. -moz-border-right-colors: red red red red green green green blue blue blue;   

5. -moz-border-left-colors: red red red red green green green blue blue blue;  

為了要實(shí)現(xiàn)三個(gè)顏色的多邊框效果，red占4px，green占3px和blue點(diǎn)4px。需要大費(fèi)周折。而且還不能直接寫border-colors，因?yàn)闉g覽器不識(shí)別這樣的屬性。

除此之外，目前瀏覽器對(duì)這個(gè)屬性支持度相當(dāng)?shù)娜?。可以說，它只是Firefox的私有屬性。

CSS透明邊框
對(duì) CSS 中的半透明顏色可能已經(jīng)有了基礎(chǔ)的了解，比如 rgba() 和 hsla()。從 2009 年開始，雖然在開發(fā)設(shè)計(jì)中使用它們需要付出一些代價(jià)，比如提供降級(jí)措施、使用IE濾鏡，但是總得來說它是一個(gè)巨大的變革。不過在實(shí)際中，它們主要被用于背景，有這么幾點(diǎn)原因：

早期的開發(fā)者沒有意識(shí)到這些新屬性就是類似 #ff0066 和 orange 的色彩，而是將它們看作是圖片，所以僅用在了背景上。
為背景提供降級(jí)方案比其他屬性更簡單。比如，可以直接使用單像素的半透明圖片替代半透明背景。對(duì)于其他屬性，則只能使用不透明顏色。
在其他屬性上使用半透明顏色，比如邊框，并不簡單，我們將在下文介紹原因。

圖注：24ways.org 是第一個(gè)在設(shè)計(jì)中使用半透明顏色的網(wǎng)站，那時(shí)還是 2008 年，那時(shí)它們網(wǎng)站的特點(diǎn)就是使用了大量的背景（由 Tim Van Damme 設(shè)計(jì)）

假設(shè)我們想要美化一個(gè)容器，讓它擁有一個(gè)白色的和半透明白色的邊框——這個(gè)半透明邊框可以讓它后面的內(nèi)容顯示出來。我們要做的第一步就像是下面這樣：

CSS Code復(fù)制內(nèi)容到剪貼板

1. border: 10px solid hsla(0,0%,100%,.5);   

2. background: white;  

除非你非常了解background和border這兩個(gè)屬性的工作原理，否則上面代碼得到的結(jié)果會(huì)讓你感到非常的困惑。邊框哪里去了呢？是不是不能為邊框添加半透明顏色呢？到底該怎么做？

圖注：第一次嘗試實(shí)現(xiàn)半透明邊框

解決方案

雖然看起來的效果和預(yù)期有所差異，其實(shí)邊框是存在的。實(shí)際上，背景色默認(rèn)會(huì)擴(kuò)展到邊框上，這一點(diǎn)可以通過給邊框添加虛線觀察到。如下圖所示：

圖注：背景默認(rèn)會(huì)擴(kuò)展到邊框區(qū)域下方

雖然這和你使用不透明的實(shí)線邊框是一樣的，但在這個(gè)示例中，它完全推翻了我們的預(yù)期。結(jié)果看起來是純白色的邊框，實(shí)際上是一個(gè)半透明白色的邊框，然后在它下面是白色的背景色。

在 CSS 2.1 中，這就是 background 的工作原理。我們不得不接受和使用它。值得慶幸的是，在Backgrounds & Borders Level 3中，我們已經(jīng)可以使用background-clip 屬性來調(diào)整這一效果。background-clip的默認(rèn)值為border-box，也就是說，背景色會(huì)填充到容器邊框以及邊框以內(nèi)的地方，所以我們只需要將其修改為padding-box（讓背景色在容器的內(nèi)邊距以及內(nèi)邊距以內(nèi)填充）就可以實(shí)現(xiàn)所需要的效果了：

CSS Code復(fù)制內(nèi)容到剪貼板

1. border: 10px solid hsla(0,0%,100%,.5);   

2. background: white;   

3. background-clip: padding-box;  

更完善的效果如下圖所示：

圖注：修正了 background-clip 的問題
總結(jié)

雖然在border-color上能運(yùn)用rgba()、hsla()設(shè)置邊框?yàn)榘胪该骰蛲耆该?，如果元素設(shè)置了背景顏色或背景圖片的時(shí)候，會(huì)直接影響邊框的透明顏色效果。特別是，要看到邊框底下的內(nèi)容時(shí)。造成這個(gè)現(xiàn)象是由于背景圖片會(huì)延伸到邊框底部。要解決這一問題，可以通過CSS3的background-clip來修正。

感謝各位的閱讀，以上就是“使用CSS實(shí)現(xiàn)多邊框和透明邊框的方法”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)使用CSS實(shí)現(xiàn)多邊框和透明邊框的方法這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！