簡單介紹CSS3中的陰影、背景和圓角邊框樣式

來源:互聯網
上載者:User
CSS2.1 發布至今已有7年的曆史。CSS3的出現就是增強CSS2.1的功能,減少圖片的使用次數以及解決HTML頁面上的特殊效果

當前,CSS3技術最適合在移動Web開發中使用的特性包括:

●增強選取器

●陰影

●強大的背景設定

●圓角邊框

陰影:

現在的CSS3樣式已經支援陰影樣式效果。目前可使用的陰影的效果分為兩種:常值內容的陰影製作效果和元素的陰影製作效果。

box-shadow

CSS3的box-shadow屬性是讓元素具有陰影的效果,其文法如下:

   box-shadow:<length> <length> <length> | color:

其中第一個 length 是陰影水平位移值;第二個length值是陰影垂直位移值;第三個值是陰影模糊值。水平和垂直位移值可取正負值,如4px或-4px.

目前box-shadow已經得到大部分現代瀏覽器的支援。可是,當我們在基於Webkit的Chrome和Safari等瀏覽器上使用該屬性時,需要將屬性的名稱寫成-webkit-box-shadow的形式。Firefox瀏覽器則要寫成-moz-box-shadow的形式。

下面代碼為使用box-shadow的簡單樣本,該樣本相容Chrome、Safari及Firefox瀏覽器:

<style type="text/css">        p        {            /* 其他瀏覽器 */            box-shadow: 3px 4px 2px #000;            /* webkit核心瀏覽器 */            -webkit-box-shadow: 3px 4px 2px #000;             /* Firefox瀏覽器 */            -moz-box-shadow: 3px 4px 2px #000;            padding:5px 4px;        }    </style>

text-shadow

text-shadow屬性用於設定常值內容的陰影製作效果或模糊效果。

目前,text-shadow屬性已得到Safari、Firefox、Chrome和Opera瀏覽器的支援。IE8以下的瀏覽器都不支援該特性。並且,大部分的移動web瀏覽器都得到了很好地支援。

text-shadow的文法和box-shadow文法基本上一致:

box-shadow:<length> <length> <length> | color:

如下代碼為text-shadow的簡單實用樣本:

 <style type="text/css">        p        {            text-shadow: 5px -10px 5px red;            color:#666;            font-size:16px;        }    </style>

背景

在CSS3規範中,CSS3對背景屬性增加了很多新特性。它既能支援背景的顯示範圍,也能支援多圖片背景。最重要的是它可以通過屬性設定,為背景顏色設定漸層或任何顏色效果,功能非常豐富。

CSS3對於背景屬性的增強,以往我們使用圖片來代替各種頁面修飾,逐漸可以通過該背景屬性替換。這些功能對頁面的載入速度,特別是在行動裝置平台,是一個頁面效能的提升。

background-size

background-size屬性用於設定背景映像的大小。

目前該屬性已經得到了Chrome、Safair、Opera瀏覽器的支援,同時該屬性也支援Android和IOS平台的Web瀏覽器。

background-size屬性在不同的Web瀏覽器下文法方面有一定的差別。在基於Webkite核心的瀏覽器Chrome和Safari瀏覽器下,其寫法為-webkit-background-size;

在移動開發項目中,建議採用相容模式的寫法,樣本如下:

 <style type="text/css">        p        {            background-size:10px 5px;            -webkit-backgriud-size:10px 5px;        }    </style>

background

background屬性在CSS3中被賦予的非常強大的功能。其中一個非常重要的功能就是多重背景。在過去,只能使用一張圖片,而CSS3中可以設定多張背景圖,文法如下:

  background:url(bg.jpg) left top no-repeat,                             url(bg2.jpg) left top no-repeat;

Chrome和Safari瀏覽器都支援background屬性的多重背景圖片。由於它們是基於Webkit的瀏覽器,因此該功能也被Android和IOS平台的行動瀏覽器支援。但鑒於採用圖片的方式設定背景會嚴重過影響在移動Web端的整體體驗和效能,因此可是使用Webkit中的一種特性對其背景採用色彩坡形,而非採用圖片方式。文法如下:

      -webkit-gradient(<type>, <type> [,<radius> ]?,<point> [, <radius> ]? [, <stop> ]*)

type類型是指採用漸層類型,如線性漸層 linear 或放射狀漸層 radiual。如下代碼:

<style type="text/css">        p        {            background: -webkit-gradient(linear,0 0,0 100%,form(#ff),to(#000));        }</style>

圓角邊框

在CSS3中已經能夠輕鬆的實現圓角效果,代碼中只要定義border-radius屬性就可以隨意實現圓角效果。

到目前為止,該屬性已得到Chrome、Safari、Opera以及Firefox瀏覽器的支援。但是,各瀏覽器之間寫法有些差別,例如:Chrome和Safari瀏覽器需要寫成-webkit-border-radius;Firefox瀏覽器則要寫成-moz-border-radius;相容的範例程式碼如下:

<style type="text/css">        p        {             border-radius:10px 5px;             /* Firefox瀏覽器 */             -moz-border-radius:10px 5px;             /* webkit 核心瀏覽器 */             -webkit-border-radius:10px 5px;        }    </style>

需要注意的是,border-radius屬性是不允許使用負值的,當其中一個為0時,則該值對應的角為矩形,否則為圓角。

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.