1、CSS3的新增邊框屬性主講：叢浩LAMP兄弟連叢浩本章內容CSS1&2中的邊框屬性(W3C標準)CSS3 新增的邊框屬性CSS3 新增屬性實例CSS1&2中的邊框屬性CSS3 新增的邊框屬性border-image屬性CSS3中新增的邊框屬性，擴充了原盒子模型的功能，使得邊框具備背景圖片屬性。此前，border僅僅具備寬度、顏色和風格屬性.實現邊框背景圖片屬性，通常使用padding和background屬性進行模擬，但是這樣就為設置盒子的背景增加了難度border-image語法語法格式：語法格式：該語法為該語法為CSS縮寫樣式縮寫樣式border-image：border-

2、image-source 圖片來源 border-image-slice分割方法 / border-image-width邊框寬度 ? | / border-image-outset 擴展方式 border-image-repeat重復方式 border-image-source 語法說明：說明：設置或檢索對象的邊框樣式使用圖像路徑。 指定一個圖像用來替代border-style邊框樣式的屬性。當border-image為none或圖像不可見時，將會顯示border-style所定義的邊框樣式效果。 對應的腳本特性為borderImageSource。 取值：取值：none： 無背景圖片。取值

3、：none： 無背景圖片。 ： 使用絕對或相對地址指定圖像。 ： 使用絕對或相對地址指定圖像。 border-image-slice語法說明：說明：設置或檢索對象的邊框背景圖的分割方式。 該屬性指定從上，右，下，左方位來分隔圖像，將圖像分成4個角，4條邊和中間區域共9份，中間區域始終是透明的（即沒圖像填充），除非加上關鍵字 fill。 對應的腳本特性為borderImageSlice。 取值：取值： 用浮點數指定寬度。不允許負值。 ： 用百分比指定寬度。不允許負值。 border-image-width語法說明：說明：設置或檢索對象的邊框厚度。 該屬性用于指定使用多厚的邊框來承載被裁剪后的圖像

4、。 該屬性可省略，由外部的border-width來定義。 對應的腳本特性為borderImageWidth。 取值：取值： 用長度值指定寬度。不允許負值。 ： 用百分比指定寬度。不允許負值。 ： 用浮點數指定寬度。不允許負值。 auto： 如果auto值被設置，則border-image-width采用與border-image-slice相同的值。 注意:該值得大小不會累加到盒子模型之上，chrome會有3像素的大小，其余瀏覽器border的大小依然為0border-image-outset語法說明：說明：置或檢索對象的邊框背景圖的擴展。 該屬性用于指定邊框圖像向外擴展所定義的數值，即如果

5、值為10px，則圖像在原本的基礎上往外延展10px再顯示。 對應的腳本特性為borderImageOutset。取值：取值： 用長度值指定寬度。不允許負值。 ： 用浮點數指定寬度。不允許負值。 border-image-repeat語法說明：說明：設置或檢索對象的邊框圖像的平鋪方式。 該屬性用于指定邊框背景圖的填充方式。可定義0-2個參數值，即水平和垂直方向。如果2個值相同，可合并成1個，表示水平和垂直方向都用相同的方式填充邊框背景圖；如果2個值都為stretch，則可省略不寫。 對應的腳本特性為borderImageOutset。 取值：取值：stretch： 指定用拉伸方式來填充邊框背景圖

6、。 repeat： 指定用平鋪方式來填充邊框背景圖。當圖片碰到邊界時，如果超過則被截斷。 round： 指定用平鋪方式來填充邊框背景圖。圖片會根據邊框的尺寸動態調整圖片的大小直至正好可以鋪滿整個邊框。寫本文檔時僅Firefox能看到該效果 space： 指定用平鋪方式來填充邊框背景圖。圖片會根據邊框的尺寸動態調整圖片的之間的間距直至正好可以鋪滿整個邊框。寫本文檔時尚無瀏覽器能看到該效果 邊框設計實例border-image-source：noneborder-image-repeat：stretch border-image-repeat：repeatborder-image-repeat：r

7、ound border-image-slice:27 fillborder-image-outset:27pxborder-image-slice:54border-image-slice:81border-radius屬性說明：說明：設置或檢索對象使用圓角邊框。提供2個參數，2個參數以“/”分隔，每個參數允許設置14個參數值，第1個參數表示水平半徑，第2個參數表示垂直半徑，如第2個參數省略，則默認等于第1個參數 水平半徑：如果提供四個參數值，將按上左、上右、下右、下左的順序作用于四個角。 如果提供一個，將用于全部的于四個角。 如果提供兩個，第一個用于上左、下右，第二個用于上右、下左。 如果提

8、供三個，第一個用于上左，第二個用于上右、下左，第三個用于下右。 垂直半徑也遵循以上4點。 對應的腳本特性為borderRadius。 取值：取值： 用長度值設置對象的圓角半徑長度。不允許負值 ： 用百分比設置對象的圓角半徑長度。不允許負值 border-top-left-radius屬性說明：說明：設置或檢索對象的左上角圓角邊框。如設置border-top-left-radius:5px 10px;表示top-left這個角的水平圓角半徑為5px，垂直圓角半徑為10px。 對應的腳本特性為borderTopLeftRadius。 取值：取值： 用長度值設置對象的圓角半徑長度。不允許負值 ： 用

9、百分比設置對象的圓角半徑長度。不允許負值 border-top-right-radius屬性說明：說明：設置或檢索對象的右上角圓角邊框。設置或檢索對象的右上角圓角邊框。如設置border-top-right-radius:5px 10px;表示top-right這個角的水平圓角半徑為5px，垂直圓角半徑為10px。 對應的腳本特性為borderTopRightRadius。 取值：取值： 用長度值設置對象的圓角半徑長度。不允許負值 ： 用百分比設置對象的圓角半徑長度。不允許負值 border-bottom-right-radius屬性說明：說明：設置或檢索對象的左下角圓角邊框設置或檢索對象的左

10、下角圓角邊框如設置border-bottom-right-radius:5px 10px;表示bottom-right這個角的水平圓角半徑為5px，垂直圓角半徑為10px。 對應的腳本特性為borderBottomRightRadius取值：取值： 用長度值設置對象的圓角半徑長度。不允許負值 ： 用百分比設置對象的圓角半徑長度。不允許負值 border-bottom-left-radius屬性說明：說明：設置或檢索對象的左下角圓角邊框。 如設置border-bottom-left-radius:5px 10px;表示bottom-left這個角的水平圓角半徑為5px，垂直圓角半徑為10px。

11、對應的腳本特性為borderBottomLeftRadius。 取值：取值： 用長度值設置對象的圓角半徑長度。不允許負值 ： 用百分比設置對象的圓角半徑長度。不允許負值 圓角實例普通邊框圓角邊框橢圓形子彈頭半月太極圓形box-shadow屬性說明：說明：設置或檢索對象陰影。參閱text-shadow屬性 可以設定多組效果，每組參數值以逗號分隔。 對應的腳本特性為boxShadow。 取值：取值：none： 無陰影 ： 第1個長度值用來設置對象的陰影水平偏移值。可以為負值 ： 第2個長度值用來設置對象的陰影垂直偏移值。可以為負值 ： 如果提供了第3個長度值則用來設置對象的陰影模糊值。 ： 如果提

12、供了第4個長度值則用來設置對象的陰影外延值。 ： 設置對象的陰影的顏色。 inset： 設置對象的陰影類型為內陰影。該值為空時，則對象的陰影類型為外陰影 盒子陰影實例-簡單陰影效果左上陰影效果右上陰影效果右下陰影效果左下陰影效果柔和陰影效果彩色陰影效果盒子陰影實例-彩虹陰影效果多顏色陰影效果/多顏色邊框效果非真實邊框盒子陰影實例-按鈕點擊效果多顏色陰影效果/多顏色邊框效果非真實邊框未點擊狀態點擊狀態點擊結束或移出按鈕狀態box-reflect屬性說明：說明：盒子倒影屬性盒子倒影屬性:可以對盒子模型進行倒影設置。可以對盒子模型進行倒影設置。格式格式:1.none 2.位置 偏移? 水印圖片?取值：取值：位置： above(上)、below(下)、left(左)、right(右)偏移： 用長度值來定義倒影與對象之間的間隔。可以為負值水印圖片: 設置倒影使用的圖片或者漸變，默認為原內容注意:該屬性目前僅webkit內核瀏覽器(chrome/safari/獵豹等