|
定義背景大小
本來我們只能對(duì)背景圖片進(jìn)行位置和重復(fù)方式的改變，不能像改變<img />標(biāo)簽圖片那樣改變大小。而在css3中就能滿足改變背景圖片大小的愿望。
示例代碼：
background-size:300px 100px;
說明：背景圖片 300px表示寬度，100px表示高度。
目前只有Opera 9.5, Safari 3 and Konqueror瀏覽器中得到支持。在幾種瀏覽器中的寫法如下：
-o-background-size, -webkit-background-size和-khtml-background-size
text-shadow文字陰影效果
示例代碼：
text-shadow: 2px 2px 2px #09e;
四個(gè)參數(shù)分別表示陰影的水平位移，垂直位移，模糊程度，陰影顏色。
目前支持的瀏覽器有Opera 9.5, Safari 3, Konqueror ， Safari 3
box-sizing改變盒狀模型結(jié)構(gòu)
縱所周知div的盒狀模型包括margin,border,padding和content四個(gè)部分.這四者的關(guān)系就無需我在這里班門弄斧啦.但是和今天主題又關(guān)的還是得說一下,那就是border里面是padding,padding里面是content.然而我們可以在css3.0中打破這一結(jié)構(gòu).使之變成content里面是border,border里面是padding.要實(shí)現(xiàn)這一切得建立在一個(gè)條件之下:box-dizing:border-box;
示例代碼：
<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>
代碼去掉-moz-box-sizing:border-box顯示的效果為
目前支持的瀏覽器有firefox,Safari 3和opera
還有一個(gè)多重背景，目前常見瀏覽器都不支持，就不寫了
經(jīng)典論壇交流：
http://bbs.blueidea.com/thread-2917482-1-1.html
本文鏈接：http://m.95time.cn/tech/web/2009/6535.asp 
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁 CSS3新特性 [2] 下一頁
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁 
第 3 頁 CSS3新特性 [3]
