詳解CSS3中10個頂級命令

CSS3中必須要知道的10個頂級命令，都是一些不錯的效果實現代碼，喜歡的朋友可以收藏下 1.邊框圓角（Border Radiuas）
這個是我們在平常很常用的吧，以前我在用p圓角的時候，特別特別的痛苦，不管是用CSS來畫圓角，還是用圖片來畫圓角都不那麼容易，但是現在好了，在CSS3中，直接只需要如下面餓代碼，就能做出美輪美奐的圓角效果了~~~

代碼如下:

#box1 { border: 1px solid #699; /* for Mozilla Firefox */ -moz-border-radius: 20px; /* for Safari & Google Chrome */ -webkit-border-radius: 20px; }

執行個體：

2.盒陰影（Box Shadow）
就是讓一個p能夠產生陰影製作效果。代碼如下：

代碼如下:

#box1 { border: 1px solid #699; -moz-box-shadow: 5px -5px 5px #b6ebf7; -webkit-box-shadow: 5px -5px 5px #b6ebf7; width: 100px; height: 100px; margin-left: 100px; margin-top: 100px; background-color:Gray; border-color:Yellow; }

需要注意的是，它有4個參數：

第一個參數：水平位移的位置，它有正數或者負數。如果是正數的話，那麼表示邊框的右（right）邊產生陰影；否則如果是負數的話，那麼它的左邊（left）框產生陰影製作效果。

第二個參數：垂直位移的位置。它也有正數或者負數。如果是正數的話，那麼表示下（bottom）邊框有陰影；否則如果是負數的話，那麼它的上（top）邊框有陰影。

第三個參數：陰影的大小

第四個參數：顏色，這個很好理解。

執行個體：

注意上面，第二個參數，我用的是負數。
有box shadow ，還有一個屬性是text-shadow，這個主要是運用在文字上面的。
代碼如下：

<p style="background-color: #535353; color: #353535; font-family: 微軟雅黑; font-size: 64px; padding:20px; font-weight:bold;"> <span style="text-shadow: -2px -2px 2px #0D0D0D, 0px 0px 5px #aaa;">Welcome to my home!</span><span style="text-shadow: 2px 2px 2px #0D0D0D, 0px 0px 5px #aaa;">Welcome to my home!</span><span style="text-shadow: 2px 2px 2px #000, 0px 0px 10px #fff, 0px 0px 20px #fff;">Welcome to my home!</span><span style="color: white; text-shadow: 0px 0px 10px #fff, 0px 0px 20px #fff, 0px 0px 40px #9dd;">Welcome to my home!</span> </p>

執行個體：

很酷吧！

3.透明度（Transparency or RGBA）

設定元素的透明度一直以來都是比較棘手的問題，不同的瀏覽器之間有不同的使用方法。

比如我以前需要如下進行設定透明度：【注意：此方法不建議用】

Firefox, Safari, Chrome和Opera下的CSS透明度

#myElement { opacity: .7; }

IE下的CSS透明度

#myElement { filter: alpha(opacity=40); }

IE8的CSS透明度的方法文法如

代碼如下:

#myElement { filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40); /* 第一行在IE6, IE7和IE8下有效 */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=40)"; /*第二行僅在IE8下有效 */ }

Firefox和Safari舊版本所需的透明度設定：

代碼如下:

#myElement { -khtml-opacity: .5; -moz-opacity: 0.5; }

是不是特別特別的坑爹啊！~~。
還好，我們現在生活在一個開始完美的時代，CSS 3出來之後，有了新的一個名詞就是透明度（transparency）的屬性。
代碼如下：

#box3 { background-color: rgba(110, 142, 185, .5); }

裡面有4個參數，前3個參數特別好理解，就是rgb顏色的（別告訴我，還不知道什麼叫rgb顏色值，不知道的拉出去打屁屁），最最重要的就是第四個值了。它的值在0到1之間，值越大表明越不透明。

不過，也別高興的太早，在這裡還是有一個特別的例子，可能大家也想到 就是微軟的IE。微軟老喜歡整個和別人不一樣的東西，累死的是我們程式員。

IE理解上面的語句，直接的理解為背景顏色，而不會理解為 rgba。為了我們在開發的時候確保在所有的瀏覽器中實現完美相容，我們需要如下進行修正：

代碼如下:

#box3 { /* For all browsers */ background-color: #6e8eb9; } body:last-child #box3 { /* Exclude all IE browsers using :last-child */ background-color: rgba(110, 142, 185, .5)!important; }

:last-child 是偽選取器，在CSS2開始在css中使用選取器。IE 對這個是不認識，所以它不會執行它後面的代碼。


所以，上面就實現了完美相容。

執行個體：

4.列數（Columns）布局
就是說可以把框框內部的內容分成幾個列數。
先上代碼：

代碼如下:

#box1 { border: 1px solid #699; /* for Mozilla Firefox */ -moz-column-count: 2; -moz-column-gap: 20px; -moz-column-rule: 1px solid #6e8eb9; /* for Safari & Google Chrome */ -webkit-column-count: 2; -webkit-column-gap: 20px; -webkit-column-rule: 1px solid #6e8eb9; margin-left: 100px; margin-top: 100px; border-color: Yellow; background-color:Gray; }

-moz-column-count:表示列的數目，比如2，那麼表示2分成2列。

-moz-column-rule:表示中間分割線的樣式。

執行個體：

上面第一個我分層2列，而第二個我是分成3列的。
還有就是第一個的 -webkit-column-rule: 3px solid #6e8eb9;我這樣設定，所以它的分割線就是加粗的。

5.顯示多個背景圖片
你可以在一個標籤元素裡應用多個背景圖片。代碼類似與css2.0版本的寫法，但引用圖片之間需用“，”逗號隔開。第一個圖片是定位在元素最上面的背景，後面的背景圖片依次在它下面顯示，如下：

代碼如下:

background-image: url(top-image.jpg), url(middle-image.jpg), url(bottom-image.jpg);

代碼如下：

border: 1px solid #699; background: url(/Nature/bird1-thumb.png) no-repeat 0 0, url(/Nature/apple.jpg) no-repeat 100% 0; border: 1px solid #699; padding: 0 20px; margin-left: 100px; margin-top: 100px; border-color: Yellow; background-color: Gray; width:400px; height:300px;

執行個體：

但是，這裡還是別高興的太早，又是微軟那孩子沒事幹，又在這裡搞一個不相容性，所以你 不得下下面代碼，為了相容所以瀏覽器：

代碼如下:

#box5 blockquote { /* 用在所有的瀏覽器*/ background: url(/i/quotel.gif) 0 0 no-repeat; padding: 0 20px; } body:last-child #box5 blockquote{ /* 用在除了IE 之外的瀏覽器:last-child */ background: url(/i/quotel.gif) no-repeat 0 0, url(/i/quoter.gif) no-repeat 100% 0; }

這樣子才OK.
6.輪廓（outlines）
也就是在框在的內部在畫一個框。
代碼如下：

#box1 { border: 1px solid #000; outline: 1px solid #699; outline-offset: -20px; border: 1px solid #699; padding: 0 20px; margin-left: 100px; margin-top: 100px; border-color: Yellow; background-color: Gray; width: 400px; height: 300px; }

參數很好理解： outline: 1px solid #699; 這個畫框；
outline-offset 這個表示裡面的位移量，通俗點說 就是距離。
執行個體：

7.背景漸層（Background Gradients）
顧名思義，漸層就是顏色慢慢的開始變淡。在CSS3中，漸層效果非常非常的靈活，而且運用也很方便。

不過，這裡需要注意的一點是在Firfox和chrome瀏覽器之間的設定沒有和上面的那麼簡單。

Firfox 的代碼：

background: -moz-linear-gradient(bottom,#b6ebf7, #fff 50%);
Chrome or safari的代碼：

background: -webkit-gradient(linear, left bottom, left top,color-stop(0, #b6ebf7), color-stop(0.80, #fff));
參數解釋下，比如在firfox中，

第一個參數：bottom 表示運用的位置，bottom表示在頂部，當然你也可以有其他地方，比如left表示在方框的左邊，right在方便的右邊，top就是在頂部啦！~。

而在chrome中，color-stop：用來表示開始和結束的值以及裡面的顏色。其餘參數和上面一樣。

執行個體：

8.旋轉（Rotate）
旋轉，顧名思義就是轉動元素的角度，很好理解。
代碼：

代碼如下:

#box1 { border: 1px solid #000; -moz-transform: rotate(20deg); -webkit-transform: rotate(20deg); border: 1px solid #699; padding: 0 20px; margin-left: 100px; margin-top: 100px; border-color: Yellow; background-color: Gray; width: 400px; height: 300px; }

rotate（角度）裡面的數組就是角度的意思，deg是英文單詞degree的縮寫 度數的意思。
執行個體：

注意：
如果是負數的話，那麼它會向相反方向轉動。
如果是超過360度的話，那麼會和360進行求餘運算，比如你寫 rotate(380deg)，那麼它的值等效於rotate（20deg）。
9.反射（reflect）
反射，其實也就是倒影效果。
代碼如下：

#myFont { -webkit-box-reflect: below 10px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(255, 255, 255, 0.51))); font-size: 30px; }

執行個體：

10.轉換（Transitions） 註：次內容來自zhangxinxu的部落格 。謝謝他的努力。

其作用是：平滑的改變CSS的值。無論是點擊事件，焦時間點事件，還是滑鼠hover，只要值改變了，就是平滑的，就是動畫。於是乎，只要一個整站通用的class，就可以很輕鬆的漸進增強地實現動畫效果，超有實用價值的說。
transition有下面些具體屬性：
transition-property :* //指定過渡的性質，比如transition-property:backgrond 就是指backgound參與這個過渡
transition-duration:*//指定這個過渡的期間
transition-delay:* //延遲過渡時間
transition-timing-function:*//指定過渡類型，有ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier
上面的主要用在transition-timing-function裡面的參數。表示速度的快慢。
代碼：

<p id="transBox" class="trans_box"> <p class="trans_list ease"> ease</p> <p class="trans_list ease_in"> ease-in</p> <p class="trans_list ease_out"> ease-out</p> <p class="trans_list ease_in_out"> ease-in-out</p> <p class="trans_list linear"> linear</p> </p>

CSS代碼：

代碼如下:

<style type="text/css"> .trans_box { padding: 20px; background-color: #f0f3f9; } .trans_list { width: 10%; height: 64px; margin: 10px 0; background-color: #486AAA; color: #fff; text-align: center; } .ease { -webkit-transition: all 4s ease; -moz-transition: all 4s ease; -o-transition: all 4s ease; transition: all 4s ease; } .ease_in { -webkit-transition: all 4s ease-in; -moz-transition: all 4s ease-in; -o-transition: all 4s ease-in; transition: all 4s ease-in; } .ease_out { -webkit-transition: all 4s ease-out; -moz-transition: all 4s ease-out; -o-transition: all 4s ease-out; transition: all 4s ease-out; } .ease_in_out { -webkit-transition: all 4s ease-in-out; -moz-transition: all 4s ease-in-out; -o-transition: all 4s ease-in-out; transition: all 4s ease-in-out; } .linear { -webkit-transition: all 4s linear; -moz-transition: all 4s linear; -o-transition: all 4s linear; transition: all 4s linear; } .trans_box:hover .trans_list, .trans_box_hover .trans_list { margin-left: 89%; background-color: #beceeb; color: #333; -webkit-border-radius: 25px; -moz-border-radius: 25px; -o-border-radius: 25px; border-radius: 25px; -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } </style>

此主要實現的效果是從左邊移動到右邊！~~。根據參數的不同，進行速度的不同。

執行個體：初始化時：

執行個體後：

可能有些朋友對這個5個功能不熟悉，所以它們的速度

最後奉獻2張有用的圖：

CSS 性質

CSS 選取器

【相關推薦】

1. CSS3免費視頻教程

2. 分享22款H5和CSS3的協助工具

3. 闡述什麼是CSS3？

4. 關於CSS3中選擇符的執行個體詳解

5. 關於CSS3中的content屬性執行個體詳解