簡單介紹CSS3中的陰影、背景和圓角邊框樣式-css教學-PHP中文網

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

零下一度

發布： 2017-04-27 14:17:06

原創

2246 人瀏覽過

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: # | colorgt; # | 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中文網其他相關文章！