CSS3邊框?qū)傩?

1、CSS3的新增邊框?qū)傩灾髦v：叢浩LAMP兄弟連叢浩本章內(nèi)容CSS1&2中的邊框?qū)傩?W3C標(biāo)準(zhǔn))CSS3 新增的邊框?qū)傩訡SS3 新增屬性實(shí)例CSS1&2中的邊框?qū)傩訡SS3 新增的邊框?qū)傩詁order-image屬性CSS3中新增的邊框?qū)傩裕瑪U(kuò)充了原盒子模型的功能，使得邊框具備背景圖片屬性。此前，border僅僅具備寬度、顏色和風(fēng)格屬性.實(shí)現(xiàn)邊框背景圖片屬性，通常使用padding和background屬性進(jìn)行模擬，但是這樣就為設(shè)置盒子的背景增加了難度border-image語(yǔ)法語(yǔ)法格式：語(yǔ)法格式：該語(yǔ)法為該語(yǔ)法為CSS縮寫樣式縮寫樣式border-image：border-

2、image-source 圖片來(lái)源 border-image-slice分割方法 / border-image-width邊框?qū)挾?? | / border-image-outset 擴(kuò)展方式 border-image-repeat重復(fù)方式 border-image-source 語(yǔ)法說(shuō)明：說(shuō)明：設(shè)置或檢索對(duì)象的邊框樣式使用圖像路徑。 指定一個(gè)圖像用來(lái)替代border-style邊框樣式的屬性。當(dāng)border-image為none或圖像不可見時(shí)，將會(huì)顯示border-style所定義的邊框樣式效果。 對(duì)應(yīng)的腳本特性為borderImageSource。 取值：取值：none： 無(wú)背景圖片。取值

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

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

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

6、。 repeat： 指定用平鋪方式來(lái)填充邊框背景圖。當(dāng)圖片碰到邊界時(shí)，如果超過(guò)則被截?cái)唷?round： 指定用平鋪方式來(lái)填充邊框背景圖。圖片會(huì)根據(jù)邊框的尺寸動(dòng)態(tài)調(diào)整圖片的大小直至正好可以鋪滿整個(gè)邊框。寫本文檔時(shí)僅Firefox能看到該效果 space： 指定用平鋪方式來(lái)填充邊框背景圖。圖片會(huì)根據(jù)邊框的尺寸動(dòng)態(tài)調(diào)整圖片的之間的間距直至正好可以鋪滿整個(gè)邊框。寫本文檔時(shí)尚無(wú)瀏覽器能看到該效果 邊框設(shè)計(jì)實(shí)例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屬性說(shuō)明：說(shuō)明：設(shè)置或檢索對(duì)象使用圓角邊框。提供2個(gè)參數(shù)，2個(gè)參數(shù)以“/”分隔，每個(gè)參數(shù)允許設(shè)置14個(gè)參數(shù)值，第1個(gè)參數(shù)表示水平半徑，第2個(gè)參數(shù)表示垂直半徑，如第2個(gè)參數(shù)省略，則默認(rèn)等于第1個(gè)參數(shù) 水平半徑：如果提供四個(gè)參數(shù)值，將按上左、上右、下右、下左的順序作用于四個(gè)角。 如果提供一個(gè)，將用于全部的于四個(gè)角。 如果提供兩個(gè)，第一個(gè)用于上左、下右，第二個(gè)用于上右、下左。 如果提

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

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

10、下角圓角邊框如設(shè)置border-bottom-right-radius:5px 10px;表示bottom-right這個(gè)角的水平圓角半徑為5px，垂直圓角半徑為10px。 對(duì)應(yīng)的腳本特性為borderBottomRightRadius取值：取值： 用長(zhǎng)度值設(shè)置對(duì)象的圓角半徑長(zhǎng)度。不允許負(fù)值 ： 用百分比設(shè)置對(duì)象的圓角半徑長(zhǎng)度。不允許負(fù)值 border-bottom-left-radius屬性說(shuō)明：說(shuō)明：設(shè)置或檢索對(duì)象的左下角圓角邊框。 如設(shè)置border-bottom-left-radius:5px 10px;表示bottom-left這個(gè)角的水平圓角半徑為5px，垂直圓角半徑為10px。

11、對(duì)應(yīng)的腳本特性為borderBottomLeftRadius。 取值：取值： 用長(zhǎng)度值設(shè)置對(duì)象的圓角半徑長(zhǎng)度。不允許負(fù)值 ： 用百分比設(shè)置對(duì)象的圓角半徑長(zhǎng)度。不允許負(fù)值 圓角實(shí)例普通邊框圓角邊框橢圓形子彈頭半月太極圓形box-shadow屬性說(shuō)明：說(shuō)明：設(shè)置或檢索對(duì)象陰影。參閱text-shadow屬性 可以設(shè)定多組效果，每組參數(shù)值以逗號(hào)分隔。 對(duì)應(yīng)的腳本特性為boxShadow。 取值：取值：none： 無(wú)陰影 ： 第1個(gè)長(zhǎng)度值用來(lái)設(shè)置對(duì)象的陰影水平偏移值。可以為負(fù)值 ： 第2個(gè)長(zhǎng)度值用來(lái)設(shè)置對(duì)象的陰影垂直偏移值。可以為負(fù)值 ： 如果提供了第3個(gè)長(zhǎng)度值則用來(lái)設(shè)置對(duì)象的陰影模糊值。 ： 如果提

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