CSS實驗室

簡介

CSS3不是新事物，更不是只是圍繞border-radius屬性實現的圓角。它正耐心的坐在那裡，已經準備好了首次登場，呷著咖啡，等著瀏覽器來鋪上紅地毯。你看，瀏覽器需要跟上了……



注意：瀏覽器需要找到有支援的才可以！

儘管把玩CSS3是很有趣的事情——就像接下來我要演示的幾篇教程中表現的那樣，但是需要瞭解的是，CSS3並沒有被當前瀏覽器完全的支持。也就是說，如果你要在你的網站中使用CSS3，請確認有針對不支持CSS3的瀏覽器的兼容方法。

CSS3的瀏覽器支持狀況：

√ Firefox (3.05+…部分支持)
√ Google Chrome (1.0.154+…部分支持)
√ Google Chrome (2.0.156+…較好支持)
× Internet Explorer (IE7, IE8 不支持)
√ Opera (9.6+…很少支持)
√ Safari (3.2.1+ windows…較好支持)

什麼是CSS，什麼是CSS3？

非常簡單，CSS代表「Casading Style Sheets」，就是樣式表，是一種替代並為網站添加樣式的標記性語言。CSS3只是表示下一代CSS，3只是版本號。

如果CSS3還沒有完全被支持，那麼我為什麼要寫CSS3呢？

因為學習新東西時間很有趣的事情！

而且有人常常問我如何實現圓角。我解釋了很多遍如何使用圖片或CSS3實現，這裡我通過寫一些我學到的一些東西的方式來希望能夠幫助其他的有需要的人。

當然你也不必只看我說的。Eric Meyer是一個瞭解CSS很多的傳奇人物，這裡有個 很棒的對Eric的訪談 ，討論CSS3，很值得一讀。

測試，特別製作了一個關於本系列教程的 測試頁面。所有本系列教程所討論的內容，在該測試頁面都有演示，你也可以訪問該頁面，來測試一下自己的瀏覽器是否支持CSS3。

本節原文：來源處...


邊框半徑和圓角

頁面中圓角的實現是個很頭疼的問題，雖然現在有很多種實現方法，但是都是比較麻煩的。在本文中，讓我們看看如何使用CSS3 border-radius來實現圓角DIV。

跨瀏覽器兼容性

就像在《CSS3系列教程：簡介》中提到的，並不是所有的瀏覽器支持CSS3，但是那些比較好的瀏覽器選擇兼容，而不是直接支持。我們有兩個能使用的前綴。

前綴：

-moz(例如 -moz-border-radius)用於Firefox
-webkit(例如：-webkit-border-radius)用於Safari和Chrome。

CSS3圓角（所有的）

不使用圖片來實現圓角曾經是很流行的能力，創建那些完美的小圓角圖片，用做適當的CSS背景，是非常費時的工作。現在，使用CSS3，我們可以用幾行代碼來創建圓角。



這是一個5px普通邊框和15px邊框半徑的設置：

程序代碼

#roundCorderC{
font-family: Arial;
border: 5px solid #dedede;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
padding: 15px 25px;
height: inherit;
width: 590px;
}

瀏覽器支持：

√ Firefox(3.05+…)
√ Google Chrome(1.0.154+…)
√ Google Chrome(2.0.156+…)
× Internet Explorer(IE7, IE8)
× Opera 9.6
√ Safari(3.2.1+ windows)

CSS3圓角(個別的)

當然，一個DIV的四個角不需要全部都是圓角，你可以個別的實現圓角。

程序代碼

#roundCornerI{
  font-family: Arial;
  border: 5px solid #dedede;
  -moz-border-radius-topleft: 15px;
  -moz-border-radius-topright: 0px;
  -moz-border-radius-bottomright: 15px;
  -moz-border-radius-bottomleft: 0px;
  -webkit-border-top-left-radius: 15px;
  -webkit-border-top-right-radius: 0px;
  -webkit-border-bottom-left-radius: 0px;
  -webkit-border-bottom-right-radius: 15px;
  padding: 15x 25px;
  height: inherit;
  width: 590px;
}

瀏覽器支持：

√ Firefox(3.05+…)
√ Google Chrome(1.0.154+…)
√ Google Chrome(2.0.156+…)
× Internet Explorer(IE7, IE8)
× Opera 9.6
√ Safari(3.2.1+ windows)

本節原文：來源處...


邊框顏色

現在我們來看一看如何為邊框的border-color添加更多的色彩。

使 用CSS3的border-radius屬性，如果你設置了border的寬度是X px，那麼你就可以在這個border上使用X種顏色，每種顏色顯示1px的寬度。如果說你的border的寬度是10個像素，但是只聲明了5或6中顏 色，那麼最後一個顏色將被添加到剩下的寬度。

瀏覽器兼容性

目前只有Firefox支持CSS3 border-colour屬性，所以我們這裡只需使用-moz前綴。

所有本系列關於CSS3的文章都會及時更新，以跟蹤瀏覽器的兼容性。

CSS3中的邊框顏色：



這裡是一個10px寬的標準邊框和邊框顏色：

程序代碼

#borderColor {
  border: 10px solid #dedede;
  -moz-border-bottom-colors: #300 #600 #700 #800 #900 #A00;
  -moz-border-top-colors: #300 #600 #700 #800 #900 #A00;
  -moz-border-left-colors: #300 #600 #700 #800 #900 #A00;
  -moz-border-right-colors: #300 #600 #700 #800 #900 #A00;
  padding: 15px 25px;
  height: inherit;
  width: 590px;
}

瀏覽器支持：

√ FireFox (3.0.5)
× Google Chrome (1.0.154+)
× Google Chrome (2.0.156+)
× Internet Explorer (IE7/IE8 RC1)
× Opera (9.6)
× Safari (3.2.1, Windows)

有圓角的邊框顏色：

程序代碼

#borderColorCorner {
  border: 10px solid #dedede;
  -moz-border-radius: 15px;
  -moz-border-bottom-colors: #303 #404 #606 #808 #909 #A0A;
  -moz-border-top-colors: #303 #404 #606 #808 #909 #A0A;
  -moz-border-left-colors: #303 #404 #606 #808 #909 #A0A;
  -moz-border-right-colors: #303 #404 #606 #808 #909 #A0A;
  padding: 15px 25px;
  height: inherit;
  width: 590px;
}

瀏覽器支持：

√ FireFox (3.0.5)
× Google Chrome (1.0.154+)
× Google Chrome (2.0.156+)
× Internet Explorer (IE7/IE8 RC1)
× Opera (9.6)
× Safari (3.2.1, Windows)

本節原文：來源處...


陰影

陰影大約從CSS2就開始有了，但是只有Safari一個瀏覽器支持它，到現在依然是這樣。陰影在CSS3中可以應用在邊框和文字上，就像圖片的陰影效果一樣。

一般可以分為box-shadow和textshadow兩類。

CSS3的box-shadow和textshadow可以寫做：box-shadow:Apx Bpx Cpx #xxx;
Apx = x軸
Bpx = y軸
Cpx = 投影長度
#XXX = 像通常一樣的顏色

瞭解了這些，我們就可以以下面的方法開始體驗了…

瀏覽器兼容性：

在前面的介紹中，我們已經聲明，並不是所有的瀏覽器都支持CSS3.最好的支持CSS3陰影效果的瀏覽器是Safari，也就是說，我們現在只需要用刀-webkit前綴。

程序代碼

#boxShadow{
  border: 5px solid #111;
  -webkit-box-shadow: 5px 5px 7px #999;
  -webkit-border-bottom-right-radius: 15px;
  padding: 15px 25px;
  height: inherit;
  width: 590px;
}

這種效果同樣可以用於圖片…

瀏覽器支持：

× FireFox (3.0.5) - [FireFox (3.1 PreAlpha) 兼容]
× Google Chrome (1.0.154.)
√ Google Chrome (2.0.156.)(支持不是太好)
× Internet Explorer (IE7/ IE8 RC1)
× Opera (9.6)
√ Safari (3.2.1, Windows)

簡單文字陰影：

程序代碼

.textShadowSingle {
  font-size: 3.2em;
  color: #F5F5F5;
  text-shadow: 3px 3px 7px #111;
  text-align: center;
}

瀏覽器支持：

× FireFox (3.0.5) - [FireFox (3.1 PreAlpha) 兼容]
× Google Chrome (1.0.154.)
√ Google Chrome (2.0.156.)(支持不是太好)
× Internet Explorer (IE7/ IE8 RC1)
√ Opera (9.6)
√ Safari (3.2.1, Windows)

多重文字陰影：

程序代碼

.textShadowMultiple {
  font-size: 3.2em;
  color: #FFF;
  text-shadow: 0px -11px 10px #C60, 0px -3px 9px #FF0;
  text-align: center;
  padding: 10px 0px 5px 0px;
  background: #151515;
}

瀏覽器支持

× FireFox (3.0.5) - [FireFox (3.1 PreAlpha) 兼容]
× Google Chrome (1.0.154.)
√ Google Chrome (2.0.156.)(支持不是太好)
× Internet Explorer (IE7/ IE8 RC1)
√ Opera (9.6)
√ Safari (3.2.1, Windows)

本節原文：來源處...


背景圖片(背景大小和多背景圖)

背景圖片/紋理有很多種使用方式，常常用於添加網站的最佳的最終美化。現在它在CSS3中被重視，我們可以應用多背景圖和背景圖片尺寸來實現更完美的效果。

CSS3的背景圖片大小可以寫成 background-size:Apx Bpx;
-Apx = x軸(圖片寬度)
-Bpx = y軸(圖片高度)

瞭解了這些，我們開始體驗這個特性吧：
最好支持CSS3背景大小的瀏覽器是Safari和Opera，所以我們只需要使用-o和-webkit前綴。

背景大小

程序代碼

#backgroundSize{
border: 5px solid #bd9ec4;
background:url(image_1.extention) bottom right no-repeat;
-o-background-size: 150px 250px;
-webkit-background-size: 150px 250px;
padding: 15px 25px;
height: inherit;
width: 590px;
}

瀏覽器支持：

× Firefox(3.05+…)
√ Google Chrome(1.0.154+…)
√ Google Chrome(2.0.156+…)
× Internet Explorer(IE7, IE8 RC1 )
√ Opera(9.6+…)
√ Safari(3.2.1+ windows…)

為了在CSS3中應用多背景圖片，我們使用都好隔開，例如：

程序代碼

background: url(image_1.extention) top right no-repeat, url(image_2.extention) bottom right no-repeat;

我們可以在一行代碼中嘗試放置多個不同的圖片…

多背景圖

程序代碼

#backgroundMultiple{
border: 5px solid #9e9aab;
background:url(image_1.extention) top left no-repeat,
url(image_2.extention) bottom left no-repeat,
url(image_3.extention) bottom right no-repeat;
padding: 15px 25px;
height: inherit;
width: 590px;
}

瀏覽器支持：

× Firefox(3.05+…)
√ Google Chrome(1.0.154+…)
√ Google Chrome(2.0.156+…)
× Internet Explorer(IE7, IE8 RC1 )
× Opera(9.6+…)
√ Safari(3.2.1+ windows…)

本節原文：來源處...


多列/多卷

使用CSS3可以為你的網站創建多列，而不用為每列制定特定的層或段落。

與多背景圖片一樣，CSS3多列也是我最喜愛的一個技術。我想這條CSS3屬性有在報紙和雜誌佈局中以外的很多潛在的用途。如果你在某個想法或個人網站中使用了這種方法，請在下面的評論中提交你的鏈接，我很高興能確認這種方法能用於很多中佈局中。

跨瀏覽器兼容性：

比較好的支持CSS3多列的瀏覽器有Firefox、Safari、Google Chrome，這樣我們就需要使用-moz和-webkit前綴了。

CSS3多列(寬度)



上面的截圖是使用了下面的CSS3樣式的效果：

程序代碼

#multiColumnWidth {
text-align: justify;
-moz-column-width: 20em;
-moz-column-gap: 2em;
-webkit-column-width: 20em;
-webkit-column-gap: 2em;
}

瀏覽器支持：

√ Firefox(3.05+…)
√ Google Chrome(1.0.154+…)
√ Google Chrome(2.0.156+…)
× Internet Explorer(IE7, IE8 RC1 )
× Opera(9.6+…)
√ Safari(3.2.1+ windows…)

CSS3多列(列數)



上面的截圖是使用了下面的CSS3樣式的效果：

程序代碼

#multiColumnCount {
text-align: justify;
-moz-column-count: 3;
-moz-column-gap: 1.5em;
-moz-column-rule: 1px solid #dedede;
-webkit-column-count: 3;
-webkit-column-gap: 1.5em;
-webkit-column-rule: 1px solid #dedede;
}

瀏覽器支持：

√ Firefox(3.05+…)
√ Google Chrome(1.0.154+…)
√ Google Chrome(2.0.156+…)
× Internet Explorer(IE7, IE8 RC1 )
× Opera(9.6+…)
√ Safari(3.2.1+ windows…)

本節原文：來源處...


嵌入字體/網絡字體

想要製作一些很酷的頭部效果而且擺脫網站安全字體並且不使用圖片文件？那麼就使用CSS3嵌入字體吧！

要使用一款字體，我們首先需要使用『@font-face』屬性。這必須先準備好我們要用的字體文件。

儘管這樣，讓我們簡單的學習一下字體方面的歷史。@font-face屬性從CSS2就已經考慮了，但卻始終在CSS2.1中還沒有出現。CSS3嘗試經它帶到標準中來。

如果你手上沒有字體文件，你可以在dafont.com下載一些。

跨瀏覽器兼容性

目前只有Safari支持@font-face特性(Google Chrome開發版 2.0.156+也支持這個特性)。

注意，你的瀏覽器需要一些時間加載字體文件，所以，就目前來說，使用圖片文件而不是CSS樣式的用戶體驗會更好些。

CSS3嵌入字體



上面的效果可由下面的樣式實現：

程序代碼

@font-face {
font-family: qianduanNet;
src: url("SketchRockwell.ttf");
}
.fontFace{
font-family: qianduanNet;
font-size: 3.2em;
letter-spacing: 1px;
text-align: center;
}

我們也可以對使用font-face的地方使用陰影效果。

程序代碼

.fontFaceShadow{
font-family: qianduanNet;
font-size: 3.2em;
letter-spacing: 1px;
text-align: center;
text-shadow: 3px 3px 7px #111;
}

瀏覽器支持：

× Firefox(3.05+…)
× Google Chrome(1.0.154+…)
√ Google Chrome(2.0.156+…)
× Internet Explorer(IE7, IE8 RC1 )(IE7+支持eot格式的字體文件)
× Opera(9.6+…)(支持文字陰影)
√ Safari(3.2.1+ windows…)

本節原文：來源處...


透明度

CSS3透明…不透明…漸變…隨便你怎麼叫它吧！這裡是一些使用CSS3透明度的指南以及一些例子。

其實這個firefox很久以前就支持了，而IE一直不支持！

「opacity」聲明用來設置一個元素的透明度：層、文字、圖片等…一個opacity的值為1的元素是完全不透明的，反之，值為0是完全透明的，看不見的。1到0之間的任何值都表示該元素的透明程度。

瀏覽器兼容性

opacity是瀏覽器支持最好的一個CSS3元素…當然，除了IE！

CSS3透明(例1：層)



上面的透明例子使用了下面的樣式：

程序代碼

div.opacityL1 { background:#036; opacity:0.2; width:575px; height:20px; }
div.opacityL2 { background:#036; opacity:0.4; width:575px; height:20px; }
div.opacityL3 { background:#036; opacity:0.6; width:575px; height:20px; }
div.opacityL4 { background:#036; opacity:0.8; width:575px; height:20px; }
div.opacityL5 { background:#036; opacity:1.0; width:575px; height:20px; }

瀏覽器支持：

√ Firefox(3.05+…)
√ Google Chrome(1.0.154+…)
√ Google Chrome(2.0.156+…)
× Internet Explorer(IE7, IE8 RC1 )
√ Opera(9.6+…)
√ Safari(3.2.1+ windows…)

CSS 3 透明(例2：圖片)



我們也可以在圖片上使用不同透明度的透明效果，就像上面的示例一樣。一個很酷的應用是將opacity應用到:hover上，實現一種鏈接的鼠標經過效果。

程序代碼

img.opacity1 { opacity:0.25; width:150px; height:100px; }
img.opacity2 { opacity:0.50; width:150px; height:100px; }
img.opacity3 { opacity:0.75; width:150px; height:100px; }

瀏覽器支持：

√ Firefox(3.05+…)
√ Google Chrome(1.0.154+…)
√ Google Chrome(2.0.156+…)
× Internet Explorer(IE7, IE8 RC1 )
√ Opera(9.6+…)
√ Safari(3.2.1+ windows…)

本節原文：來源處...


RGBA

使用新的CSS3的」RGBA」聲明，不僅僅讓我們像通常一樣設置RGB顏色，而且還可以設置其透明度。

RGBA像RGB一樣設置顏色，而這個」A」——RGBA中的最後一個值——允許我們設置該元素的透明度。就像opacity聲明一樣，一個opacity值為1的元素是完全不透明的，而一個opacity為0的元素是完全透明的。

瀏覽器兼容性

RGBA現在在Firefox、Google Chrome和Safari中都有比較好的支持，同樣不需要前綴。

CSS3 RGBA 色彩



上面的效果有以下樣式實現：

程序代碼

div.rgbaL1 { background:rgba(153, 134, 117, 0.2); height:20px; }
div.rgbaL2 { background:rgba(153, 134, 117, 0.4); height:20px; }
div.rgbaL3 { background:rgba(153, 134, 117, 0.6); height:20px; }
div.rgbaL4 { background:rgba(153, 134, 117, 0.8); height:20px; }
div.rgbaL5 { background:rgba(153, 134, 117, 1.0); height:20px; }

瀏覽器支持

√ Firefox(3.05+…)
√ Google Chrome(1.0.154+…)
√ Google Chrome(2.0.156+…)
× Internet Explorer(IE7, IE8 RC1 )
× Opera(9.6+…)
√ Safari(3.2.1+ windows…)

本節原文：來源處...


HSL和HSLA

使用CSS3 HSL聲明同樣是用來設置顏色的。下一個呢？ HSLA？ 是的，這個和RGBA的效果是一樣的。

HSL聲明使用色調Hue(H)、飽和度Saturation(s)和亮度Lightness(L)來設置顏色。

Hue衍生於色盤：0和360是紅色，接近120的是綠色，240是藍色。
Saturation值是一個百分比：0%是灰度，100%飽和度最高
Lightness值也是一個百分比：0%是最暗，50%均值，100%最亮。
隨想：為什麼是」ligntness」呢？或許我更習慣Photoshop中的」Brightness」呢……

瀏覽器兼容性：

目前HSL和HSLA被Firefox、Google Chrome、和Safari瀏覽器較好的支持，而且不需要任何前綴

CSS3 HSL



上面的演示由以下樣式實現：

程序代碼

div.hslL1 { background:hsl(320, 100%, 50%); height:20px; }
div.hslL2 { background:hsl(320, 50%, 50%); height:20px; }
div.hslL3 { background:hsl(320, 100%, 75%); height:20px; }
div.hslL4 { background:hsl(202, 100%, 50%); height:20px; }
div.hslL5 { background:hsl(202, 50%, 50%); height:20px; }
div.hslL6 { background:hsl(202, 100%, 75%); height:20px; }

瀏覽器支持：

√ Firefox(3.05+…)
√ Google Chrome(1.0.154+…)
√ Google Chrome(2.0.156+…)
× Internet Explorer(IE7, IE8 RC1 )
√ Opera(9.6+…)
√ Safari(3.2.1+ windows…)

CSS3 HSLA



上面的效果由以下樣式實現：

程序代碼

div.hslaL1 { background:hsla(165, 35%, 50%, 0.2); height:20px; }
div.hslaL2 { background:hsla(165, 35%, 50%, 0.4); height:20px; }
div.hslaL3 { background:hsla(165, 35%, 50%, 0.6); height:20px; }
div.hslaL4 { background:hsla(165, 35%, 50%, 0.8); height:20px; }
div.hslaL5 { background:hsla(165, 35%, 50%, 1.0); height:20px; }

瀏覽器支持：

√ Firefox(3.05+…)
√ Google Chrome(1.0.154+…)
√ Google Chrome(2.0.156+…)
× Internet Explorer(IE7, IE8 RC1 )
× Opera(9.6+…)
√ Safari(3.2.1+ windows…)

本節原文：來源處...

特別聲明，本系列文章譯自：Zen Elements，非常感謝Alex的辛勤工作。
Special Staterment: this series posts were translate fromZen Elements, thanks Alex for his great work so much.