CSS2.1 發(fā)布至今已有7年的歷史。CSS3的出現(xiàn)就是增強(qiáng)CSS2.1的功能,減少圖片的使用次數(shù)以及解決HTML頁面上的特殊效果
當(dāng)前,CSS3技術(shù)最適合在移動(dòng)Web開發(fā)中使用的特性包括:
●增強(qiáng)的選擇器
●陰影
●強(qiáng)大的背景設(shè)置
●圓角邊框
陰影:
現(xiàn)在的CSS3樣式已經(jīng)支持陰影樣式效果。目前可使用的陰影的效果分為兩種:文本內(nèi)容的陰影效果和元素的陰影效果。
box-
CSS3的box-屬性是讓元素具有陰影的效果,其語法如下:box-: | color:
其中第一個(gè) 是陰影水平偏移值;第二個(gè)值是陰影垂直偏移值;第三個(gè)值是陰影模糊值。水平和垂直偏移值可取正負(fù)值,如4px或-4px.
目前box-已經(jīng)得到大部分現(xiàn)代瀏覽器的支持。可是,當(dāng)我們在基于的和等瀏覽器上使用該屬性時(shí),需要將屬性的名稱寫成--box-的形式。瀏覽器則要寫成-moz-box-的形式。
下面代碼為使用box-的簡單示例,該示例兼容、及瀏覽器:
p
{
/* 其他瀏覽器 */
box-: 3px 4px 2px #000;
/* 內(nèi)核瀏覽器 */
--box-: 3px 4px 2px #000;
/* 瀏覽器 */
-moz-box-: 3px 4px 2px #000;
:5px 4px;
}
text-
text-屬性用于設(shè)置文本內(nèi)容的陰影效果或模糊效果。
目前,text-屬性已得到、、和Opera瀏覽器的支持。IE8以下的瀏覽器都不支持該特性。并且,大部分的移動(dòng)web瀏覽器都得到了很好地支持。
text-的語法和box-語法基本上一致:
box-: | color:
如下代碼為text-的簡單實(shí)用示例:
p
{
text-: 5px -10px 5px red;
color:#666;
font-size:16px;
}
背景
在CSS3規(guī)范中,CSS3對背景屬性增加了很多新特性。它既能支持背景的顯示范圍,也能支持多圖片背景。最重要的是它可以通過屬性設(shè)置,為背景顏色設(shè)置漸變或任何顏色效果,功能非常豐富。
CSS3對于背景屬性的增強(qiáng),以往我們使用圖片來代替各種頁面修飾,逐漸可以通過該背景屬性替換。這些功能對頁面的加載速度,特別是在移動(dòng)設(shè)備平臺(tái),是一個(gè)頁面性能的提升。
-size
-size屬性用于設(shè)置背景圖像的大小。
目前該屬性已經(jīng)得到了、、Opera瀏覽器的支持,同時(shí)該屬性也支持和IOS平臺(tái)的Web瀏覽器。
-size屬性在不同的Web瀏覽器下語法方面有一定的差別。在基于內(nèi)核的瀏覽器和瀏覽器下,其寫法為---size;
在移動(dòng)開發(fā)項(xiàng)目中,建議采用兼容模式的寫法,示例如下:
p
{
-size:10px 5px;
---size:10px 5px;
}
屬性在CSS3中被賦予的非常強(qiáng)大的功能。其中一個(gè)非常重要的功能就是多重背景。在過去,只能使用一張圖片,而CSS3中可以設(shè)置多張背景圖css3把圖片變成圓角有背景圖片,語法如下::url(bg.jpg) left top no-,
url(bg2.jpg) left top no-;
和瀏覽器都支持屬性的多重背景圖片。由于它們是基于的瀏覽器,因此該功能也被和IOS平臺(tái)的移動(dòng)瀏覽器支持。但鑒于采用圖片的方式設(shè)置背景會(huì)嚴(yán)重過影響在移動(dòng)Web端的整體體驗(yàn)和性能,因此可是使用中的一種特性對其背景采用顏色漸變,而非采用圖片方式。語法如下:--(, [, ]?, [, ]? [, ]*)
type類型是指采用漸變類型,如線性漸變 或徑向漸變 。如下代碼:
p
{
: --(,0 0,0 100%,form(#ff),to(#000));
}
圓角邊框
在CSS3中已經(jīng)能夠輕松的實(shí)現(xiàn)圓角效果,代碼中只要定義-屬性就可以隨意實(shí)現(xiàn)圓角效果。
到目前為止,該屬性已得到、、Opera以及瀏覽器的支持。但是,各瀏覽器之間寫法有些差別,例如:和瀏覽器需要寫成---;瀏覽器則要寫成-moz--;兼容的示例代碼如下:
p
{
-:10px 5px;
/* 瀏覽器 */
-moz--:10px 5px;
/* 內(nèi)核瀏覽器 */
---:10px 5px;
}
需要注意的是,-屬性是不允許使用負(fù)值的css3把圖片變成圓角有背景圖片,當(dāng)其中一個(gè)為0時(shí),則該值對應(yīng)的角為矩形,否則為圓角。