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

   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:d82af2074b26fcfe177e947839b5d381 d82af2074b26fcfe177e947839b5d381# d82af2074b26fcfe177e947839b5d381 | colorgt; d82af2074b26fcfe177e947839b5d381# d82af2074b26fcfe177e947839b5d381 | color:##; | 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屬性在不同的網頁瀏覽器下語法上有一定的差異。在基於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時，則該值對應的角為矩形，否則為圓角。 ###

以上是簡單介紹CSS3中的陰影、背景和圓角邊框樣式的詳細內容。更多資訊請關注PHP中文網其他相關文章！