站長(zhǎng)資訊網(wǎng)
css3邊框新增加的特性有：border-radius、border-image、border-image-outset、border-image-repeat、border-image-slice、border-image-width等。
本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
css3的邊框新增加的特性（屬性）
| 屬性 | 描述 | CSS |
|---|---|---|
| border-radius | 設(shè)置或檢索對(duì)象使用圓角邊框。 | |
| border-bottom-left-radius | 設(shè)置或檢索對(duì)象的左下角圓角邊框。提供2個(gè)參數(shù)，2個(gè)參數(shù)以空格分隔，每個(gè)參數(shù)允許設(shè)置1個(gè)參數(shù)值，第1個(gè)參數(shù)表示水平半徑，第2個(gè)參數(shù)表示垂直半徑，如第2個(gè)參數(shù)省略，則默認(rèn)等于第1個(gè)參數(shù) | 3 |
| border-bottom-right-radius | 設(shè)置或檢索對(duì)象的右下角圓角邊框。 | 3 |
| border-top-left-radius | 定義左上角邊框的形狀。 | 3 |
| border-top-right-radius | 定義右上角邊框的形狀。 | 3 |
| border-image | 設(shè)置或檢索對(duì)象的邊框樣式使用圖像來(lái)填充。 | 3 |
| border-image-outset | 規(guī)定邊框圖像超過(guò)邊框的量。 | 3 |
| border-image-repeat | 規(guī)定圖像邊框是否應(yīng)該被重復(fù)（repeated）、拉伸（stretched）或鋪滿（rounded）。 | 3 |
| border-image-slice | 規(guī)定圖像邊框的向內(nèi)偏移。 | 3 |
| border-image-source | 規(guī)定要使用的圖像，代替 border-style 屬性中設(shè)置的邊框樣式。 | 3 |
| border-image-width | 規(guī)定圖像邊框的寬度。 | 3 |
| box-decoration-break | 規(guī)定行內(nèi)元素被折行 | 3 |
| box-shadow | 向方框添加一個(gè)或多個(gè)陰影。 | 3 |
| box-reflect | 設(shè)置或檢索對(duì)象的倒影 | 3 |
border-image
CSS3中新增的邊框?qū)傩?，擴(kuò)充了原盒子模型的功能，使得邊框具備背景圖片屬性。此前，border僅僅具備寬度、顏色和風(fēng)格屬性.
實(shí)現(xiàn)邊框背景圖片屬性，通常使用padding和background屬性進(jìn)行模擬，但是這樣就為設(shè)置盒子的背景增加了難度
語(yǔ)法格式： 該語(yǔ)法為 CSS 縮寫(xiě)樣式
border-image：
[border-image-source 圖片來(lái)源 ]
說(shuō)明：
設(shè)置或檢索對(duì)象的邊框樣式使用圖像路徑。
指定一個(gè)圖像用來(lái)替代border-style邊框樣式的屬性。當(dāng)border-image為none或圖像不可見(jiàn)時(shí)，將會(huì)顯示border-style所定義的邊框樣式效果。
對(duì)應(yīng)的腳本特性為borderImageSource。
取值：
none： 無(wú)背景圖片。
none： 無(wú)背景圖片。
<url>： 使用絕對(duì)或相對(duì)地址指定圖像。
<url>： 使用絕對(duì)或相對(duì)地址指定圖像。
[ border-image-slice分割方法 ]
說(shuō)明：
設(shè)置或檢索對(duì)象的邊框背景圖的分割方式。
該屬性指定從上，右，下，左方位來(lái)分隔圖像，將圖像分成4個(gè)角，4條邊和中間區(qū)域共9份，中間區(qū)域始終是透明的（即沒(méi)圖像填充），除非加上關(guān)鍵字 fill。
對(duì)應(yīng)的腳本特性為borderImageSlice。
取值：
<number>： 用浮點(diǎn)數(shù)指定寬度。不允許負(fù)值。
<%>： 用百分比指定寬度。不允許負(fù)值。
[
/ [ border-image-width邊框?qū)挾?]? |
說(shuō)明：
設(shè)置或檢索對(duì)象的邊框厚度。
該屬性用于指定使用多厚的邊框來(lái)承載被裁剪后的圖像。
該屬性可省略，由外部的border-width來(lái)定義。
對(duì)應(yīng)的腳本特性為borderImageWidth。
取值：
<length>： 用長(zhǎng)度值指定寬度。不允許負(fù)值。
<percentage>： 用百分比指定寬度。不允許負(fù)值。
<number>： 用浮點(diǎn)數(shù)指定寬度。不允許負(fù)值。
auto： 如果auto值被設(shè)置，則border-image-width采用與border-image-slice相同的值。
注意:該值得大小不會(huì)累加到盒子模型之上，chrome會(huì)有3像素的大小，其余瀏覽器border的大小依然為0
/ [border-image-outset 擴(kuò)展方式 ]
說(shuō)明：
置或檢索對(duì)象的邊框背景圖的擴(kuò)展。
該屬性用于指定邊框圖像向外擴(kuò)展所定義的數(shù)值，即如果值為10px，則圖像在原本的基礎(chǔ)上往外延展10px再顯示。
對(duì)應(yīng)的腳本特性為borderImageOutset。
取值：
<length>： 用長(zhǎng)度值指定寬度。不允許負(fù)值。
<number>： 用浮點(diǎn)數(shù)指定寬度。不允許負(fù)值。
]
[ border-image-repeat重復(fù)方式 ]
說(shuō)明：
設(shè)置或檢索對(duì)象的邊框圖像的平鋪方式。
該屬性用于指定邊框背景圖的填充方式。可定義0-2個(gè)參數(shù)值，即水平和垂直方向。如果2個(gè)值相同，可合并成1個(gè)，表示水平和垂直方向都用相同的方式填充邊框背景圖；如果2個(gè)值都為 stretch，則可省略不寫(xiě)。
對(duì)應(yīng)的腳本特性為borderImageOutset。
取值：
stretch： 指定用拉伸方式來(lái)填充邊框背景圖。
repeat： 指定用平鋪方式來(lái)填充邊框背景圖。當(dāng)圖片碰到邊界時(shí)，如果超過(guò)則被截?cái)唷?/p>
round： 指定用平鋪方式來(lái)填充邊框背景圖。圖片會(huì)根據(jù)邊框的尺寸動(dòng)態(tài)調(diào)整圖片的大小直至正好可以鋪滿整個(gè)邊框。寫(xiě)本文檔時(shí)僅Firefox能看到該效果
space： 指定用平鋪方式來(lái)填充邊框背景圖。圖片會(huì)根據(jù)邊框的尺寸動(dòng)態(tài)調(diào)整圖片的之間的間距直至正好可以鋪滿整個(gè)邊框。寫(xiě)本文檔時(shí)尚無(wú)瀏覽器能看到該效果
CSS3 新增屬性實(shí)例
1、
<style> div{ width:300px; height:300px; background:url(./shuaige.jpg) no-repeat center ; border-image-source:none; } </style> </head> <body> <div></div> </body>
2、
<style> div{ width:300px; height:300px; background:url(./shuaige.jpg) center no-repeat ; border-image-source:url(./border.png);/*邊框圖片屬性*/ border-image-width:27px;/*邊框圖片寬度屬性*/ border-image-slice:27;/*邊框圖片切割屬性*/ border-image-outset:0px;/*邊框圖片擴(kuò)展屬性*/ border-image-repeat:stretch;/*邊框圖片重復(fù)屬性*/ } </style> </head> <body> <div> </div> </body>
3、
<style> div{ width:300px; height:300px; background:url(shuaige.jpg) no-repeat center; border-image-source:url(border.png); border-image-width:27px; border-image-slice:27; border-image-outset:0px; border-image-repeat:repeat;/*設(shè)定重復(fù)方式為重復(fù)*/ } </style> </head> <body> <div> </div> </body>
4、
<style> div{ width:300px; height:300px; background:url(shuaige.jpg) no-repeat center; border-image-source:url(border.png); border-image-width:27px; border-image-slice:27; border-image-outset:0px; border-image-repeat:round;/*設(shè)定重復(fù)方式為round 會(huì)看情況進(jìn)行縮放或縮小*/ } </style> </head> <body> <div> </div> </body>
5、
<style> div{ width:300px; height:300px; background:url(./shuaige.jpg) center no-repeat ; border-image-source:url(./border.png);/*邊框圖片屬性*/ border-image-width:27px;/*邊框圖片寬度屬性*/ border-image-slice:27 fill; /*設(shè)定邊框圖片背景填充內(nèi)容部分,會(huì)顯示第5塊切割的內(nèi)容*/ border-image-outset:0px;/*邊框圖片擴(kuò)展屬性*/ border-image-repeat:stretch;/*邊框圖片重復(fù)屬性*/ } </style> </head> <body> <div> </div> </body>
6、
<style> div{ width:300px; height:300px; background:url(./shuaige.jpg) center no-repeat ; border-image-source:url(./border.png); border-image-width:27px; border-image-slice:54;/*切割為寬度的2倍 會(huì)自動(dòng)縮放*/ border-image-outset:0px; border-image-repeat:stretch; } </style> </head> <body> <div> </div> </body>
7、
<style> div{ width:300px; height:300px; background:url(./shuaige.jpg) center no-repeat ; border-image-source:url(./border.png); border-image-width:27px; border-image-slice:81;/*切割為寬度的3倍*/ border-image-outset:0px; border-image-repeat:stretch; } </style> </head> <body> <div> </div> </body>
8、
<style> div{ width:300px; height:300px; background:url(./shuaige.jpg) center no-repeat ; border-image-source:url(./border.png); border-image-width:27px; border-image-slice:27; border-image-outset:154px;/*向外擴(kuò)展的大小*/ border-image-repeat:repeat; } </style> </head> <body> <div> </div> </body>
（學(xué)習(xí)視頻分享：css視頻教程）
