DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> DIV十CSS布局 >> 布局實例 >> 實例講解使用CSS實現多邊框和透明邊框的方法
實例講解使用CSS實現多邊框和透明邊框的方法
編輯:布局實例     

   CSS多邊框

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

  box-shadow解決方案

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

  CSS Code復制內容到剪貼板

  background: yellowgreen;

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

  效果如下圖所示:

201598162333022.png (218×160)

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

  這還不夠令人驚訝,因為它和我們使用 border 創建的邊框差不多。不過,強大的是我們可以使用逗號來創建任意數量的陰影。所以,只需要繼續添加陰影就可以實現多重陰影了,比如,添加一個顏色為 deeppink 的邊框:

  CSS Code復制內容到剪貼板

  background: yellowgreen;

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

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

  CSS Code復制內容到剪貼板

  background: yellowgreen;

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

  0 0 0 15px deeppink,

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

  除了下述的少數情況外,使用 box-shadow 的解決方案都很好用:

  陰影並不是邊框,它們並不占有實際的空間,也不能歸屬於 box-sizing 的范圍。不過,你可以通過使用內邊距或外邊距(取決於陰影是內部的還是外部的)占據額外的空間來模擬。

  上述示例模擬的邊框是位於元素外部的。它不能捕獲類似懸停和點擊的鼠標事件。如果事件很重要,那麼可以通過添加 inset 關鍵字讓陰影出現在元素的內部。注意,你可能需要添加額外的內邊距來擴充空間。

  outline的解決方案

  在某些情況下,如果我們只需要兩層邊框,那麼我們只需要一層常規的邊框和一層outline 就可以實現。這也讓我們的邊框在樣式上保持了足夠的靈活性(比如我們想要一個虛線邊框),但是使用 box-shadow 的話,我們只能模擬出實線邊框。如下圖所示:

201598162807292.png (216×140)

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

  CSS Code復制內容到剪貼板

  background: yellowgreen;

  border: 10px solid #655;

  outline: 15px solid deeppink;

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

201598162823768.png (224×149)

  *注:對於虛線樣式的輪廓線,通過給 outline-offset 設置負值,創建了一個基礎的縫紉效果 *

  不過,這種方法也有一些限制:

  就像起初說的那樣,這種方法只能模擬兩層邊框,因為每個元素只能創建一個 outline。如果需要創建多重邊框,那麼只能使用 box-shadow 的方法。

  border-radius 並不能讓 outline 呈現圓角效果,所以,即使你的邊框是圓角的,outline 仍然是直角的(如下圖所示)。注意,CSS WG 認為這是一個 bug,在未來border-radius可能可以將 outline 變為圓角。

  根據 CSS User Interface Level 3 specification 的說法:“outliens 可能並不是矩形。”雖然大多數情況下它看起來像是矩形,但是在你使用這一方法時,還是需要進行跨浏覽器測試的。

201598162840791.png (245×143)

  圖注:通過outline創建的輪廓線並沒有貼合元素的圓角,這個問題在未來可能會被修正

  border-colors解決方案

  border-colors是一個獨特的屬性,從字面上來說就是為多邊框而生,只可惜的是,到目前為止這僅是Gecko內核浏覽器獨有的屬性。

  如果不追究浏覽器的兼容性,那麼border-colors也可以實現多邊框的效果。在具體使用時,需要分成四邊邊框來寫:

  CSS Code復制內容到剪貼板

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

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

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

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

201598163018629.jpg (552×421)

  雖然這種方式也能實現多邊框效果,但相比前兩種解決方案而言要麻煩一些,來看一個簡單示例:

  CSS Code復制內容到剪貼板

  border: 10px solid;

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

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

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

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

  為了要實現三個顏色的多邊框效果,red占4px,green占3px和blue點4px。需要大費周折。而且還不能直接寫border-colors,因為浏覽器不識別這樣的屬性。

  除此之外,目前浏覽器對這個屬性支持度相當的弱。可以說,它只是Firefox的私有屬性。

  CSS透明邊框

  對 CSS 中的半透明顏色可能已經有了基礎的了解,比如 rgba() 和 hsla()。從 2009 年開始,雖然在開發設計中使用它們需要付出一些代價,比如提供降級措施、使用IE濾鏡,但是總得來說它是一個巨大的變革。不過在實際中,它們主要被用於背景,有這麼幾點原因:

  早期的開發者沒有意識到這些新屬性就是類似 #ff0066 和 orange 的色彩,而是將它們看作是圖片,所以僅用在了背景上。

  為背景提供降級方案比其他屬性更簡單。比如,可以直接使用單像素的半透明圖片替代半透明背景。對於其他屬性,則只能使用不透明顏色。

  在其他屬性上使用半透明顏色,比如邊框,並不簡單,我們將在下文介紹原因。

201598163043194.png (203×133)

  圖注:24ways.org 是第一個在設計中使用半透明顏色的網站,那時還是 2008 年,那時它們網站的特點就是使用了大量的背景(由 Tim Van Damme 設計)

  假設我們想要美化一個容器,讓它擁有一個白色的和半透明白色的邊框——這個半透明邊框可以讓它後面的內容顯示出來。我們要做的第一步就像是下面這樣:

  CSS Code復制內容到剪貼板

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

  background: white;

  除非你非常了解background和border這兩個屬性的工作原理,否則上面代碼得到的結果會讓你感到非常的困惑。邊框哪裡去了呢?是不是不能為邊框添加半透明顏色呢?到底該怎麼做?

201598163215091.jpg (202×129)

  圖注:第一次嘗試實現半透明邊框

  解決方案

  雖然看起來的效果和預期有所差異,其實邊框是存在的。實際上,背景色默認會擴展到邊框上,這一點可以通過給邊框添加虛線觀察到。如下圖所示:

201598163240803.png (202×161)

  圖注:背景默認會擴展到邊框區域下方

  雖然這和你使用不透明的實線邊框是一樣的,但在這個示例中,它完全推翻了我們的預期。結果看起來是純白色的邊框,實際上是一個半透明白色的邊框,然後在它下面是白色的背景色。

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

  CSS Code復制內容到剪貼板

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

  background: white;

  background-clip: padding-box;

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

201598163329562.png (199×131)

  圖注:修正了 background-clip 的問題

  總結

  雖然在border-color上能運用rgba()、hsla()設置邊框為半透明或完全透明,如果元素設置了背景顏色或背景圖片的時候,會直接影響邊框的透明顏色效果。特別是,要看到邊框底下的內容時。造成這個現象是由於背景圖片會延伸到邊框底部。要解決這一問題,可以通過CSS3的background-clip來修正。@Chris Coyier早在2010年的時候就在CSS-Tricks詳細介紹過這方面的知識。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved