圖解css3：核心技術與案例實戰.3.1　CSS3邊框簡介

3.1　CSS3邊框簡介

border屬性在CSS1中就已經定義了，使用它可以設定元素的邊框風格，例如設定不同的邊框顏色以及粗細。在詳細介紹CSS3邊框運用之前，先簡單回顧邊框屬性。

3.1.1　邊框的基本屬性

CSS1和CSS2中的邊框屬性其實很簡單，其主要包括三個型別值。

border-width：設定元素邊框的粗細。

border-color：設定元素邊框的顏色。

border-style：設定元素邊框的型別。

在實際中可以將上面三個屬性合併在一起，其縮寫的語法：

border: border-width  border-style 
border-color;

縮寫後的每個屬性之間使用空格隔開，而且它們之間沒有先後順序，可這裡三個值中唯一需要的值是“border-style”，因此，要是這樣寫邊框樣式將會沒有任何效果。

.elm {border:3px red}

此時瀏覽器將“border-style”解析成為“none”。要是這樣設定，這個時候元素的邊框是實線，粗線將是其預設值。

.elm{border:solid}

邊框border-width的預設值是“medium”（大約等於3～4px）；border-color的預設色就是字型的顏色。

在Web實際製作之中，時常只為了方便使用，CSS中的border可以給不同的邊設定不同的風格，其也遵守“TRBL”原則（Top/Right/Bottom/Left），例如單獨寫邊框型別。

border-top-style:/*設定元素頂部邊框型別*/

border-right-style:/*設定元素右邊邊框型別*/

border-bottom-style:/*設定元素底部邊框型別*/

border-left-style:/*設定元素左邊邊框型別*/

上面是邊框型別的擴充套件寫法，同樣的道理，border-color和border-width也可以像上面一樣使用。除了上面的寫法之外，還有一種簡寫形式。

border-style: solid;

/*一個值時，表示四條邊都solid型別*/

border-style: solid dotted;

/*兩個值時，第一個值表示元素上下邊框型別，第二值表示左右邊框型別*/

border-style:solid dotted dashed;

/*三個值時，第一個值表示元素頂邊的型別，第二個值表示左右邊框型別，第三個值表示底部邊框型別*/

border-style: solid dotted dashed inset;

/*四個值時，第一個值表示元素頂邊的型別，第二個值表示元素右邊框型別，第三個值表示元素底邊的型別，第四個值表示元素左邊框型別*/

同樣的原理，border-color和border-width具有一樣的使用方法。如果只需要設定元素某部分具有邊框效果，我們可以合成起來。

li {

 
border: 1px solid red;

  border-width:
1px 0;

}

僅兩行程式碼就表達出元素li頂部和底部都有一條1px的紅色實線。這樣方便維護程式碼，並且提升CSS效能。

3.1.2　邊框的型別

CSS中使用border-style為元素border定義邊框型別，常見的有實線“solid”、虛線“dashed”、點狀線“dotted”等。下面一起看看CSS中border-style的幾種型別效果，如

表3-1所示。

 

表3-1　border-style值列表

屬性值     功能描述         示例程式碼         效果

none         定義無邊框     .elm {border:none;} none

hidden      與“none”相同。不過應用於表時除外，對於表，hidden用於解決邊框衝突     .elm{border:hidden;}        hidden

dotted      定義點狀邊框         .elm{border:3px dotted red ;}

dashed     定義虛線邊框         .elm{border:3px dashed red;}

solid 定義實線邊框         .elm{border:3px solid red;}     

double      定義雙線。雙線的寬度等於border-width的值 .elm{border:3px double red;} 

groove      定義3D凹槽邊框，其效果取決於border-color的值         .elm{border:3px groove red;} 

ridge         定義3D壟狀邊框，其效果取決於border-color的值         .elm{border:3px ridge red;}    

inset         定義3D inset邊框，其效果取決於border-color的值        .elm{border:8px inset red;}    

outset      定義3D  outset邊框，其效果取決於border-color的值  .elm{border:8px outset red;} 

inherit      規定應該從父元素繼承邊框樣式。部分瀏覽器不支援這個屬性值                  

 

上面11個值在各瀏覽器下呈現的效果均有差異，其中最不可預測的邊框樣式是double。它定義為兩條線的寬度加上這兩條線之間的空間等於border-width值。而dotted、dashed、outset和inset在不同的瀏覽器下也無法保證一致，如圖3-1所示。

 

圖3-1　border-style各瀏覽器渲染效果

注

意     圖3-1中IE 7和IE 8未使用原生IE 測試，而是使用了IE 9自帶的IE 7、IE 8進行的測試。

 

3.1.3　誰在使用CSS3邊框

CSS3增強的邊框樣式具有強大的生命力，靈活使用這些屬性可以設計很多優美精巧的UI介面效果。這些屬性誰在使用呢？

 border-color受制於瀏覽器相容性，至今在專案中使用該屬性的專案幾乎不存在。

border-image瀏覽器的支援度強一些，但運用在專案中僅存在一些前端愛好者的blog中。

border-radius得到瀏覽器的強大支援，在網際網路上隨處可見。

box-shadow，目前在Web頁面上CSS3的盒子陰影特性應用非常廣泛。