CSS3 邊框

CSS3 邊框
通過 CSS3，您能夠創(chuàng)建圓角邊框，向矩形添加陰影，使用圖片來繪制邊框 - 并且不需使用設(shè)計(jì)軟件，比如 PhotoShop。

在本章中，您將學(xué)到以下邊框?qū)傩裕?br />
border-radius
box-shadow
border-image
瀏覽器支持
屬性    瀏覽器支持
border-radius                    
box-shadow                    
border-image                    
Internet Explorer 9+ 支持 border-radius 和 box-shadow 屬性。

Firefox、Chrome 以及 Safari 支持所有新的邊框?qū)傩浴?br />
注釋：對(duì)于 border-image，Safari 5 以及更老的版本需要前綴 -webkit-。

Opera 支持 border-radius 和 box-shadow 屬性，但是對(duì)于 border-image 需要前綴 -o-。

CSS3 圓角邊框
在 CSS2 中添加圓角矩形需要技巧。我們必須為每個(gè)圓角使用不同的圖片。

在 CSS3 中，創(chuàng)建圓角是非常容易的。

在 CSS3 中，border-radius 屬性用于創(chuàng)建圓角：

這個(gè)矩形有圓角哦！

實(shí)例
向 div 元素添加圓角：

div { border:2px solid; border-radius:25px; -moz-border-radius:25px; /* Old Firefox */ } 
親自試一試

CSS3 邊框陰影
在 CSS3 中，box-shadow 用于向方框添加陰影：

實(shí)例
向 div 元素添加方框陰影：

div { box-shadow: 10px 10px 5px #888888; } 
親自試一試

CSS3 邊框圖片
通過 CSS3 的 border-image 屬性，您可以使用圖片來創(chuàng)建邊框：

border-image 屬性允許您規(guī)定用于邊框的圖片！

用于創(chuàng)建上面的邊框的原始圖片：

用于邊框的圖片
實(shí)例
使用圖片創(chuàng)建圍繞 div 元素的邊框：

div { border-image:url(border.png) 30 30 round; -moz-border-image:url(border.png) 30 30 round; /* 老的 Firefox */ -webkit-border-image:url(border.png) 30 30 round; /* Safari 和 Chrome */ -o-border-image:url(border.png) 30 30 round; /* Opera */ } 
親自試一試

新的邊框?qū)傩?br /> 屬性    描述    CSS
border-image    設(shè)置所有 border-image-* 屬性的簡(jiǎn)寫屬性。    3
border-radius    設(shè)置所有四個(gè) border-*-radius 屬性的簡(jiǎn)寫屬性。    3
box-shadow    向方框添加一個(gè)或多個(gè)陰影。    3