|
前面我已經(jīng)介紹過(guò)了30個(gè)應(yīng)該記住的CSS選擇器，那么新的CSS3又有哪些新屬性呢？雖然大多數(shù)需要特定的前綴，但你仍然可以在你的項(xiàng)目中使用它，其實(shí)上我也鼓勵(lì)大家這么做。
關(guān)鍵是首先確定你是否對(duì)各個(gè)瀏覽器之間的細(xì)微的差別有所了解，你能肯定的說(shuō)IE顯示的90度的角就不圓滑嘛？這取決于你的決定。但是要永遠(yuǎn)記住，網(wǎng)站設(shè)計(jì)不必看到所有瀏覽器的不同。在文章的最后，我們將顯示一個(gè)有趣的最終的案例。
1、border-radius
演示
border-radius是一大堆CSS3屬性中最受歡迎的一種，border-radius是CSS3中級(jí)別最高的一個(gè)屬性。當(dāng)設(shè)計(jì)者害怕一個(gè)層在將在不同的瀏覽器之間以不同的方式顯示時(shí)，CSS圓角，一個(gè)很初級(jí)的知識(shí)，將引導(dǎo)他們開(kāi)始學(xué)習(xí)。
我們?yōu)橐苿?dòng)瀏覽器提供一個(gè)備用的觀看體驗(yàn)的想法都非常好。奇怪的是，當(dāng)這種方法出現(xiàn)在桌面瀏覽器上時(shí)，他們卻又不這么認(rèn)為。
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
注意：請(qǐng)?jiān)赟afari 5 和 IE9瀏覽器中執(zhí)行”border-radius”語(yǔ)法。
圓
許多讀者也許不會(huì)意識(shí)到我們可以用這個(gè)屬性來(lái)做一個(gè)圓。
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
演示
如果想再添加點(diǎn)效果，我們可以利用Flexible Box Model（詳情在8中）來(lái)使得文字在垂直在水平方向都居中。這需要加點(diǎn)代碼，但這僅僅是對(duì)不同瀏覽器的補(bǔ)償。
display: -moz-box;
display: -webkit-box;
display: box;
-moz-box-orient: horizontal;
/* the default, so not really necessary here */
-webkit-box-orient: horizontal;
box-orient: horizontal;
-moz-box-pack: center;
-moz-box-align: center;
-webkit-box-pack: center;
-webkit-box-align: center;
box-pack: center;
box-align: center;
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁(yè) 下一頁(yè) 你需要熟知10個(gè)的CSS3屬性 [2]
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁(yè) 你需要熟知10個(gè)的CSS3屬性 [1]
第 2 頁(yè) 
