CSS新特性:圓角邊框多欄Gird布局背景設(shè)置

互聯(lián)網(wǎng) 發(fā)布時(shí)間：2009-04-02 19:35:22 作者：佚名

網(wǎng)頁(yè)制作Webjx文章簡(jiǎn)介：到現(xiàn)在為止,只有一些已經(jīng)工作的CSS3特性. 到現(xiàn)在為止，只有一些已經(jīng)工作的特性，他們中的一些如下: 圓角從web2.0開(kāi)始，開(kāi)始流行使用圓角，如果你不使用圓角，你的網(wǎng)站可能不會(huì)被列入web2.0網(wǎng)站

到現(xiàn)在為止,只有一些已經(jīng)工作的CSS3特性.
定義背景大小
本來(lái)我們只能對(duì)背景圖片進(jìn)行位置和重復(fù)方式的改變，不能像改變<img />標(biāo)簽圖片那樣改變大小。而在css3中就能滿(mǎn)足改變背景圖片大小的愿望。
示例代碼：
background-size:300px 100px;

說(shuō)明：背景圖片 300px表示寬度，100px表示高度。
目前只有Opera 9.5, Safari 3 and Konqueror瀏覽器中得到支持。在幾種瀏覽器中的寫(xiě)法如下：
-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)系就無(wú)需我在這里班門(mén)弄斧啦.但是和今天主題又關(guān)的還是得說(shuō)一下,那就是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>