轉(zhuǎn)自藍(lán)色經(jīng)典

CSS3的新特性

到現(xiàn)在為止，只有一些已經(jīng)工作的特性，他們中的一些如下:

圓角
從web2.0開始，開始流行使用圓角，如果你不使用圓角，你的網(wǎng)站可能不會被列入web2.0網(wǎng)站。主要問題是，你至少需要4個圖片（每個角一個）和一些JS或復(fù)雜的層來實現(xiàn)圓角。

這些將成為過去了！兩行就足夠了。讓我給你個例子：

HTML:

This is easy

css 代碼:

復(fù)制內(nèi)容到剪貼板

代碼:

.round {
????background-color: #666;
????color: #fff;
????line-height: 20px;
????width: 200px;
????padding: 10px;
????-webkit-border-radius: 10px;
????-moz-border-radius: 10px;
} 這里是上面的截屏:

1.jpg (2.17 KB)
2009-3-20 17:11

那么，有什么新東西？實際上CSS3的聲明是border-radius。 到目前為止，這個特性尚未確定，眾多瀏覽器生產(chǎn)商通過前綴支持該屬性。Firefox使用 -moz- ， Safari使用 -webkit-

這里同樣支持你選擇哪個角使用圓角，這可以通過使用“TopLeft TopRight BottomRight BottomLeft”實現(xiàn)。示例： 復(fù)制內(nèi)容到剪貼板

代碼:

# -moz-border-radius-topleft / -webkit-border-top-left-radius
# -moz-border-radius-topright / -webkit-border-top-right-radius 如果可能你想要使用圓角功能，但是想要其它瀏覽器表現(xiàn)同樣的效果，看這里。

邊框
另外一個令人興奮的CSS3新的border特性是支持border-image。這樣你就能為每一個獨立的角和邊框定義一個圖片。 復(fù)制內(nèi)容到剪貼板

代碼:

border-image:
? ? border-top-image
? ? border-right-image
? ? border-bottom-image
? ? border-left-image
? ? border-corner-image:
? ? border-top-left-image
? ? border-top-right-image
? ? border-bottom-left-image
? ? border-bottom-right-image 使用的圖片可以是這樣的：

2.jpg (9.27 KB)
2009-3-20 17:11

border的另一個非常幫的特性是使用gradientcolors，而不是用圖片：

3.jpg (3.91 KB)
2009-3-20 17:11

CSS 代碼： 復(fù)制內(nèi)容到剪貼板

代碼:

.bordercolor{
????border: 8px solid #000;
????-moz-border-bottom-colors: #0fff09 #00fff2 #00ff00 #ffd #ff0 #aaa #bbb #ccc;
????-moz-border-top-colors:? ? #0fff09 #00fff2 #00ff00 #ffd #ff0 #aaa #bbb #ccc;
????-moz-border-left-colors:? ?#0fff09 #00fff2 #00ff00 #ffd #ff0 #aaa #bbb #ccc;
????-moz-border-right-colors:??#0fff09 #00fff2 #00ff00 #ffd #ff0 #aaa #bbb #ccc;
????width:200px;} 目前只有Firefox3支持這個特性，所以在Safari和Opera無法使用。

多欄
該特性使生活更加容易，呵呵。這個新特性允許網(wǎng)頁設(shè)計師將文字填入欄中。這可以通過兩種方法實現(xiàn)，定義各欄的寬度，或者是定義欄數(shù)。

多欄布局目前只支持Mozilla核心的瀏覽器和Safari 3， 它們支持各自的屬性前綴 -moz-和-webkit-。下面的例子使用欄寬： 復(fù)制內(nèi)容到剪貼板

代碼:

-moz-column-width: 13em;
-webkit-column-width: 13em;
-moz-column-gap: 1em;
-webkit-column-gap: 1em; 下一個例子使用欄數(shù)： 復(fù)制內(nèi)容到剪貼板

代碼:

-moz-column-count: 3;
-moz-column-gap: 1em;
-moz-column-rule: 1px solid black;
-webkit-column-count: 3;
-webkit-column-gap: 1em;
-webkit-column-rule: 1px solid black; 這兩個例子輸出如下：

4.jpg (11.51 KB)
2009-3-20 17:11

還有一個特性尚未生效，它就是“column-space-distribution”，這個屬性可以描述當(dāng)頁面中還有剩余空間時如何分配欄目之間的間距。

以上文章轉(zhuǎn)自：http://www.qianduan.net/?p=755
/*=================================================*/


關(guān)于CSS3 中的 Gird 布局

我們看看下面這張圖：

1.jpg (45.51 KB)
2009-3-20 19:53

圖中藍(lán)色的線不會出現(xiàn)在實際的網(wǎng)頁中。對于這個布局復(fù)雜的三欄網(wǎng)頁來說，如果使用 CSS3 Gird 布局的話，我們只需這樣寫： 復(fù)制內(nèi)容到剪貼板

代碼:

body { columns:3; column-gap:0.5in; }
img { float：page top right; width:3gr; } 其中，body 部分聲明頁面為 3 欄，欄間距為 0.5英寸；img 中 float 屬性指明圖片浮動位置為頁面的右上角（CSS3 定位好強(qiáng)大 -__-），而寬度為 3 個欄寬。只需這樣兩行 CSS，我們就可以實現(xiàn)這個復(fù)雜的布局了。真的很神奇。

Gird 布局是好，不過如果你認(rèn)為它很簡單的話，你就大錯特錯了。看看 w3c 中關(guān)于它的介紹，你會發(fā)現(xiàn)理解它的意義不亞于看懂天書。好在還是個草案，但愿它到了正式版的時候，能夠更加簡單易用點。

Gird 布局應(yīng)用很廣泛，最簡單的例子就是內(nèi)容的分欄顯示。但這個 CSS3 特性目前還沒有任何瀏覽器可以支持它。誰要是能第一個支持它（以及其它 CSS3 草案），那就酷斃了。不知道，最近異常低調(diào)的 IE8，會不會是這第一個吃螃蟹的人呢？

定義背景大小

本來我們只能對背景圖片進(jìn)行位置和重復(fù)方式的改變，不能像改變<img />標(biāo)簽圖片那樣改變大小。而在css3中就能滿足改變背景圖片大小的愿望。
示例代碼： 復(fù)制內(nèi)容到剪貼板

代碼:

background-size:300px 100px; 1.gif (6.3 KB)
2009-3-20 20:14

說明：背景圖片??300px表示寬度，100px表示高度。
目前只有Opera 9.5, Safari 3 and Konqueror瀏覽器中得到支持。在幾種瀏覽器中的寫法如下： 復(fù)制內(nèi)容到剪貼板

代碼:

-o-background-size, -webkit-background-size和-khtml-background-size text-shadow文字陰影效果
示例代碼： 復(fù)制內(nèi)容到剪貼板

代碼:

text-shadow: 2px 2px 2px #09e; 2.gif (4.58 KB)
2009-3-20 20:14

四個參數(shù)分別表示陰影的水平位移，垂直位移，模糊程度，陰影顏色。
目前支持的瀏覽器有Opera 9.5, Safari 3, Konqueror ， Safari 3


box-sizing改變盒狀模型結(jié)構(gòu)

縱所周知div的盒狀模型包括margin,border,padding和content四個部分.這四者的關(guān)系就無需我在這里班門弄斧啦.但是和今天主題又關(guān)的還是得說一下,那就是border里面是padding,padding里面是content.然而我們可以在css3.0中打破這一結(jié)構(gòu).使之變成content里面是border,border里面是padding.要實現(xiàn)這一切得建立在一個條件之下:box-dizing:border-box;
示例代碼： 復(fù)制內(nèi)容到剪貼板

代碼:

<style type="text/css">
div.container {
? ? width:400px;
? ? border:10px solid black;
? ? height:40px;
}
div.split {
? ? -moz-box-sizing:border-box;
? ???width:50%;
? ???height:40px;
? ???border:10px silver ridge;
? ???float:left;
? ???padding:5px;
}
</style>
<div class="container">
<div class="split">文本內(nèi)容</div>
<div class="split">文本內(nèi)容.</div>
</div> 3.gif (1.25 KB)
2009-3-20 20:14

代碼去掉-moz-box-sizing:border-box顯示的效果為
4.gif (1.72 KB)
2009-3-20 20:17

目前支持的瀏覽器有firefox,Safari 3和opera

還有一個多重背景，目前常見瀏覽器都不支持，就不寫了

總結(jié)

以上是生活随笔為你收集整理的CSS3新特性（整理贴）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。