CSS3中的新特性：顏色、圓角、陰影、漸變效果和等多瀏覽器支持介紹

CSS3按鈕生成器在線版

• 類型：網(wǎng)頁設(shè)計大小：1KB語言：英文 評分：6.6
• 標(biāo)簽：

立即下載

這篇文章的目標(biāo)讀者是網(wǎng)頁開發(fā)人員。本文首先講訴了CSS3的瀏覽器前綴，接著將講述一些基于標(biāo)準(zhǔn)的擴展。在CSS3特性的部分里，將涉及圓角，rgba顏色，陰影，漸變，動畫變換，和2D轉(zhuǎn)換等。

前綴

有一些瀏覽器在CSS3還未標(biāo)準(zhǔn)化之前就已經(jīng)實現(xiàn)了CSS3的特性。因此，在語法還未被標(biāo)準(zhǔn)規(guī)定下來之前，一些CSS3的樣式就在那些瀏覽器中加上了其特定的前綴。例如在firefox和Safari上，漸變的CSS3語法就不相同。Firefox 使用 -moz-linear-gradient，而 Safari (WebKit) 則使用 -webkitgradient。同理，很多的CSS3語法都被不同的瀏覽器加上了不同的前綴。

常見的前綴有：
• Chrome: -webkit-
• Safari: -webkit-
• Firefox: -moz-
• IE: -ms-
• Opera: -o-

目前，你應(yīng)該首先聲明帶瀏覽器前綴的樣式，然后再聲明W3C標(biāo)準(zhǔn)的樣式。這是為了保證當(dāng)未來的瀏覽器只支持標(biāo)準(zhǔn)化后的CSS3樣式時，你的代碼仍然能夠有效運行。

#prefix-example {
   -moz-box-shadow: 0 3px 5px #FFF;
   -webkit-box-shadow: 0 3px 5px #FFF;
   box-shadow: 0 3px 5px #FFF;
}

顏色

CSS3提供了一些新方法來定義顏色，比如增加了alpha透明度的設(shè)置。在以前，想實現(xiàn)透明效果通常是平鋪一個 1px × 1px 的背景圖片，現(xiàn)在你可以拋棄那種做法了。

新增加的 rgb 樣式可以允許你用數(shù)字來定義RGB的值，而不再需要使用16進制了。 如果你想自己轉(zhuǎn)化兩者的對應(yīng)值，你可以使用Safari自帶的 Web Inspector 工具，在 Styles 面板上點擊相應(yīng)的顏色即可。

下面的代碼等同于 #FFF， 就是白色：

#rgb-example {
   // rgb(red, green, blue);
   color: rgb(255, 255, 255);
}

你也可以使用新增的 hsl 樣式。HSL分別代表色度、飽和度、亮度。

色度：代表在顏色盤上的度數(shù)，0度表示紅色，120度表示綠色，240度表示藍色。在之間的表示相應(yīng)的中間色。

飽和度：一個百分比值，100% 表示完全顯示該顏色。

亮度： 也是一個百分比值，0% 表示暗（黑色），100% 表示亮（白色）。

如果采用rgb或者hsl寫法，那么增加alpha透明度非常簡單，只需要在后面加上一個 0 到1之間的小數(shù)即可。 0表示完全透明，1表示完全不透明。

#alpha-example {
   background: hsla(324, 100%, 50%, .5);
   border: 1em solid rgba(0, 0, 0, .3);
   color: rgba(255, 255, 255, .8);
}

瀏覽器支持：
• Firefox: 完全支持
• Chrome: 完全支持
• Opera: 完全支持
• Safari: 完全支持
• IE: 完全支持

圓角

過去，在CSS2.1的環(huán)境下實現(xiàn)圓角效果簡直就是一種打擊。因為那通常需要額外的HTML代碼段，圖片甚至JavaScript代碼。

現(xiàn)在，事情變得容易多了，你只需要使用 border-radius 樣式。就像 padding 或者 margin的樣式定義一樣，你可以使用4個radius來定義4個角，或者使用2個radius定義水平的和垂直的角，或者使用1個radius定義所有的角。如果你設(shè)置一個足夠大的 radius，甚至可以將整個容器組成一個圓形。

#rounded-corner{
   border-radius: 20px;
   // horizonal, vertical
   border-radius: 20px 20px;
   // top left, top right, bottom right, bottom left
   border-radius: 20px 20px 20px 20px;
}

瀏覽器支持：
• Firefox: 完全支持
• Chrome: 完全支持
• Opera: 完全支持
• Safari: 需要使用 -webkit- 前綴
• IE: 版本9 以上支持

陰影

在CSS3之前，很多開發(fā)人員不會理會陰影效果，因為那是一個大麻煩。現(xiàn)在CSS3提供了 box-shadow 樣式，可以讓你輕松實現(xiàn)陰影效果。但是注意不要過度使用陰影效果，因為那可能帶來瀏覽器渲染的性能問題。

box-shadow 可以接受若干選項：垂直方向的偏移，水平方向的偏移，模糊的半徑，陰影擴展的距離，以及顏色。如果你還給出inset選項，陰影將向容器內(nèi)擴展，否者默認(rèn)情況下，陰影是向容器外擴展的。另外，你也可以對一個容器使用若干個陰影，通過使用逗號隔開他們各自的定義，如同下列代碼所示：

#drop-shadows{
// horizonal offset, vertical offset, blur radius, color
box-shadow: 10px 5px 15px #000;
// inset shadows
box-shadow: 10px 5px 15px #000 inset;
// horizonal offset, vertical offset, blur radius, spread distance, color
box-shadow: 10px 5px 15px 15px #000;
// multiple shadows
box-shadow: 0 1px 1px #FFF inset, 5px 5px 10px #000;
}

瀏覽器支持：
• Firefox: 完全支持
• Chrome: 需要使用 -webkit- 前綴
• Opera: 完全支持
• Safari: 需要使用 -webkit- 前綴
• IE: 版本9 以上支持

文字陰影

在CSS3之前，可能唯一實現(xiàn)文字陰影的方法就是使用加工好的圖片代替文字——真是一個淫蕩的方法。（沒錯，原文就是這么寫的 ==�。�

現(xiàn)在，CSS3允許你通過 text-shadow 樣式來增加文字陰影。只需要傳入幾個參數(shù)：垂直偏移、水平偏移、模糊半徑(可選參數(shù))、顏色。

#text-shadow{
// horizonal offset, vertical offset, color
text-shadow: 1px 1px #FFF;
// horizonal offset, vertical offset, blur radius, color
text-shadow: 1px 1px .3em rgba(255, 255, 255, .8);
}

文字陰影與容器陰影不同點就是：它不支持陰影擴展半徑和向內(nèi)的陰影。

瀏覽器支持：
• Firefox: 完全支持
• Chrome: 完全支持
• Opera: 完全支持
• Safari: 完全支持
• IE: 不支持

漸變效果

以前，實現(xiàn)漸變效果通常是靠平鋪背景圖片。背景圖片是固定的寬度或者高度，然后靠圖像編輯軟件制造漸變效果。

CSS3增加了對線性漸變和徑向漸變漸變的支持，也被看作最有用的新特性之一。有若干個種CSS方法可以生成漸變，你只需要聲明對應(yīng)的顏色即可。

對于線性漸變，只需要傳入顏色列表即可。

linear-gradient(#CCC, #DDD, white) 從CCC變到DDD，再變到FFF

默認(rèn)情況下，漸變效果是垂直的。但是你可以通過傳入位置值來改變它的方向。

// horizontal gradient
linear-gradient(left, #CCC, #DDD, #FFF);
// or with a specific angle
linear-gradient(-45deg , #CCC , #FFF)

如果你希望更多地控制漸變效果從哪個位置開始，你可以在顏色旁邊使用聲明一個百分比或者像素值。

linear-gradient(white , #DDD 20% , black)  在容器高度20%的地方已經(jīng)變成DDD了

你也可以漸變到透明，或者從透明漸變到不透明：

radial-gradient( rgba(255, 255, 255, .8) , transparent )

Safari目前使用的是不同的語法，在不久的將來它將變得兼容標(biāo)準(zhǔn)寫法。但是現(xiàn)在，你需要這樣使用：

// -webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*);
-webkit-gradient(linear, left top, left bottom, from(#FFF), color-stop(10%, #DDD), to(#CCC) );

盡管主流的瀏覽器都支持漸變，但是幾乎都要其瀏覽器前綴寫法：

• Firefox: with -moz-
• Chrome: with -webkit-
• Safari: alternative implementation
• IE >= 10: with -ms-
• Opera >= 11.1: with -o-

所以，一個支持跨瀏覽器的漸變效果實現(xiàn)的CSS代碼如下：

#gradient-example {
/* Fallback */
background: #FFF;
/* Chrome < 10, Safari < 5.1 */
background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#CCC));
/* Chrome >= 10, Safari >= 5.1 */
background: -webkit-linear-gradient(#FFF, #CCC);
/* Firefox >= 3.6 */
background: -moz-linear-gradient(#FFF, #CCC);
/* Opera >= 11.1 */
background: -o-linear-gradient(#FFF, #CCC);
/* IE >= 10 */
background: -ms-linear-gradient(#FFF, #CCC);
/* The standard */
background: linear-gradient(#FFF, #CCC);
}

多重背景

就像你可以在CSS3里設(shè)置多重陰影一樣（逗號隔開），你也可以設(shè)置多重背景。

以前，實現(xiàn)多重背景通常需要創(chuàng)建若干嵌套的DOM元素。現(xiàn)在CSS3讓你只需使用"逗號隔開"的寫法加上若干個背景樣式了。這極大地簡化了代碼量。

#multiple-backgrounds{
   background: url(snowflakes.png) top repeat-x,
               url(chimney.png) bottom no-repeat,
               -moz-linear-gradient(white, #CCC),
               #CCC ;
}

瀏覽器支持：
• Firefox: 完全支持
• Chrome: 完全支持
• Opera: 完全支持
• Safari:  完全支持
• IE: 版本9 以上支持

選擇符

CSS3提供了若干新的選擇符：

:first-child
選擇Collection中的第一個元素
:last-child
選擇Collection中的最后一個元素
:only-child
選擇只有一個孩子的元素
:target
選擇跟URL的hash值對應(yīng)的元素
:checked
選擇被checked狀態(tài)的check元素

我想要重點講述的是下面一些選擇符：

第N個孩子

:nth-child 選擇符讓你改變每N個元素的樣式。例如，下面的代碼將選擇每第3個元素：

#example:nth-child( 3n ) { /* ... */ }

下面的代碼將選擇奇數(shù)號元素或者偶數(shù)號元素：

/* Even children */
#example:nth-child( 2n ) { /* ... */ }
#example:nth-child( even ) { /* ... */ }
/* Odd children */
#example:nth-child( 2n+1 ) { /* ... */ }
#example:nth-child( odd ) { /* ... */ }

你也可以使用反向的Nth-child選擇符。例如，下面代碼將選擇最后一個元素：

/* Last child */
#example:nth-last-child( 1 )

實際上，:first-child 選擇符等同于 :nth-child(1)，同理， :last-child 等同于 :nth-last-child(1) 。

直接孩子選擇符

你可以使用 大于符號> 來限制只選擇直接孩子元素

/* Only directly descendant divs */
#example > div { }

否定選擇符

你可以使用 :not 來否定一個簡單的選擇符。不過，目前否定選擇符并不支持復(fù)雜的選擇符，例如你不能這樣用  p:not(h1 + p)

/* Only directly descendant children, except ones with the "current" class */
#example > *:not(.current) {
display: none
}

瀏覽器支持：
• Firefox: 完全支持
• Chrome: 完全支持
• Opera: 完全支持
• Safari:  完全支持
• IE: 版本9 以上支持

變換效果（Transition）

CSS3增加了對transition的支持，使得你可以借由樣式變化創(chuàng)造簡單的動畫效果。你需要做的是傳入以下參數(shù)：變換持續(xù)時間，屬性，變換的方式（可選）。你可以使用秒(s)或微秒(ms)作為持續(xù)時間參數(shù)。

/* duration, property, animation type (optional) */
transition: 1.5s opacity ease-out
/* Multiple transitions */
transition: 2s opacity , .5s height ease-in
transition: .5s height , .5s .5s width

有若干種時間點序列（timing sequence）方式可供選擇：

• linear
• ease-in
• ease-out
• ease-in-out

或者，你可以自定義一個時間點序列（timing sequence）。時間點序列的目的是控制transition效果在不同時間子段中的速度。

#transition-example {
position: absolute;
/* cubic-bezier(x1, y1, x2, y2) */
transition: 5s left cubic-bezier(0.0, 0.35, .5, 1.3);
}

在Safari和Chrome中，一旦transition完成，一個名叫 WebKitTransitionEvent 的事件將在該元素上觸發(fā)。 在Firefox中，這個事件叫做 transitionend。不好的地方是，使用CSS3有若干缺點：比如，在變換過程中你不能作過多的控制，以及并不是所有的DOM元素都是可變換的（transitionable）。這就意味著，transition只能被用于簡單的動畫。另外，一些瀏覽器（例如 Safari）對transition做了硬件層面上的渲染加速。

#transition-example {
width: 50px;
height: 50px;
background: red;
-webkit-transition: 2s background ease-in-out;
-moz-transition: 2s background ease-in-out;
-o-transition: 2s background ease-in-out;
transition: 2s background ease-in-out;
}
#transition-example:hover {
background: blue;
}

由于某些原因，如果你想在漸變效果之上做transition，那么必須至少有一個端點具有alpha值。另外，你也不能在某些值之間作transition，比如height:0和 height:auto之間。

瀏覽器支持：
• Firefox: with -moz-
• Chrome: with -webkit-
• Safari: with -webkit-
• IE >= 10.0: with -ms-
• Opera: with -o-

邊框圖像

使用 border-image 樣式，你可以設(shè)置一張圖片作為DOM元素的邊框。第一個參數(shù)指出圖片的URL，接著一個參數(shù)指出需要的圖片是怎樣從原圖片上切割的，最后一個參數(shù)指出圖片的伸展方式�？蛇x的伸展方式有round（平鋪），repeat（重復(fù)），和stretch（縮放）。

border-image: url(border.png) 14 14 14 14 round round;
border-image: url(border.png) 14 14 14 14 stretch stretch;

瀏覽器支持：
• Firefox: with -moz-
• Chrome: with -webkit-
• Safari: with -webkit-
• IE: 不支持
• Opera: with -o-

Box Sizing（盒模型的大小調(diào)整？）

你是否曾經(jīng)有過這樣的想法，使一個元素的寬度為100%，但是它仍然具有padding和margin值？ 對于傳統(tǒng)的盒模型來說，CSS對于百分比寬度的計算時參考的是父容器的寬度，然后再加上margin和padding。因此，如果一個元素有100%的寬度，再加上padding和margin或者border，它一定會溢出的（overflow）。

現(xiàn)在，通過設(shè)置 box-sizing屬性的值為 border-box （它的默認(rèn)值是contetbox），你可以改變盒模型大小計算的方式，讓它一并考慮borders、margins、padding,和content。

.border-box {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

該特性目前已被各瀏覽器廣泛支持了，而且它是安全穩(wěn)定的除非你考慮在IE8之前的版本中使用。

形狀變換（Transformations）

拜CSS3所賜，我們可以實現(xiàn)簡單的2D形狀變換。比如，可以讓元素旋轉(zhuǎn)，縮放，傾斜。下面的代碼是把一個元素逆時針旋轉(zhuǎn)30度。

transform: rotate( -30deg );

下面的代碼是把一個元素沿著X方向和Y方向各自傾斜一定的角度。

transform: skew( 30deg , -10deg );

下面的代碼是使用scale表達式把一個元素的大小增加或減少一定的比例。默認(rèn)情況下，一個元素的scale應(yīng)該是1.0。

transform: scale(1.2);

注意，你可以通過并排這些transformation函數(shù)，從而達到實現(xiàn)多種變換的效果。

transform: rotate(30deg) skewX(30deg);

瀏覽器支持：
• Firefox: with -moz-
• Chrome: with -webkit-
• Safari: with -webkit-
• IE >= 9: with -ms-
• Opera: with -o-

活動盒模型（Flexible Box Model）

CSS3引進了活動盒模型的概念。這個概念在其他GUI框架上已經(jīng)存在很久了，比如在Adobe Flex上�；顒雍心Ｐ陀惺裁从媚�？比如，在以前，如果你想讓list元素按照水平方向排列，你需要使用元素浮動�，F(xiàn)在活動盒模型讓你可以完成這個效果。請參照以下的代碼。

.hbox {
display: -webkit-box;
-webkit-box-orient: horizontal;
-webkit-box-align: stretch;
-webkit-box-pack: left;
display: -moz-box;
-moz-box-orient: horizontal;
-moz-box-align: stretch;
-moz-box-pack: left;
}
.vbox {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-align: stretch;
display: -moz-box;
-moz-box-orient: vertical;
-moz-box-align: stretch;
}

首先，我們設(shè)置該元素的display屬性值為 -webkit-box 或者 -moz-box。然后，設(shè)置direction的值，告訴該元素的子元素將如何排列它們的盒子。默認(rèn)情況下，所有的子元素會相同地擴展以適應(yīng)父元素的大小，但是，你可以設(shè)置 box-flex 改變這種行為。

通過設(shè)置 box-flex 為0，就使得子元素不會擴展。如果設(shè)置 box-flex 為1甚至更高的值，那么子元素將擴展以占領(lǐng)其他的空白的空間。例如，可以設(shè)置邊欄（sidebar）的 flex值為0，設(shè)置主欄的 flex值為1，這樣邊欄不會擴展，主欄將擴展到占滿剩余的空間。

#sidebar {
-webkit-box-flex: 0;
-moz-box-flex: 0;
box-flex: 0;
width: 200px;
}
#content {
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-flex: 1;
}

瀏覽器支持：
• Firefox: with -moz-
• Chrome: with -webkit-
• Safari: with -webkit-
• IE >= 10: with -ms-
• Opera: 不支持

自定義字體

@font-face 樣式可以讓你在網(wǎng)頁中使用自定義字體。這樣，該網(wǎng)頁的顯示就可以不再依賴于用戶電腦中已安裝的字體了。目前支持字體類型為 TrueType 或者 OpenType 的字體。字體文件必須放在跟該網(wǎng)頁相同的域名上。
使用 @font-face 時首先要給出該字體的font-family，然后給出指向字體文件的地址。

@font-face {
font-family: "Bitstream Vera Serif Bold";
src: url("/fonts/VeraSeBd.ttf");
}

接著在網(wǎng)頁中的任何地方使用該字體了。font-family的值跟上面的font-family值對應(yīng)。

#font-example {
font-family: "Bitstream Vera Serif Bold";
}

字體將以異步下載的方式下載到用戶瀏覽器中，并且在下載完成后作用與網(wǎng)頁上。在下載還未完成的時間里，那些字體會暫時以瀏覽器默認(rèn)字體顯示。因此，如果考慮用戶體驗，可以先指定一個其他已安裝的可選字體來替換瀏覽器的默認(rèn)字體。

瀏覽器支持：
• Firefox: full support
• Chrome: full support
• Safari: full support
• IE >= 9: full support
• Opera: full support