您現在的位置: 365建站網 > 365教程 > CSS3教程 > CSS3 邊框

CSS3 邊框

此節有 186 人學習過     參與評論

CSS3 邊框

通過 CSS3,您能夠創建圓角邊框,向矩形添加陰影,使用圖片來繪制邊框 - 并且不需使用設計軟件,比如 PhotoShop。

在本章中,您將學到以下邊框屬性:

  • border-radius
  • box-shadow
  • border-image

瀏覽器支持

屬性 瀏覽器支持
border-radius          
box-shadow          
border-image          

Internet Explorer 9+ 支持 border-radius 和 box-shadow 屬性。

Firefox、Chrome 以及 Safari 支持所有新的邊框屬性。

注釋:對于 border-image,Safari 5 以及更老的版本需要前綴 -webkit-。

Opera 支持 border-radius 和 box-shadow 屬性,但是對于 border-image 需要前綴 -o-。

CSS3 圓角邊框

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

在 CSS3 中,創建圓角是非常容易的。

在 CSS3 中,border-radius 屬性用于創建圓角:

這個矩形有圓角哦!

實例

向 div 元素添加圓角:

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

親自試一試

CSS3 邊框陰影

在 CSS3 中,box-shadow 用于向方框添加陰影:

 

實例

向 div 元素添加方框陰影:

div
{
box-shadow: 10px 10px 5px #888888;
}

親自試一試

CSS3 邊框圖片

通過 CSS3 的 border-image 屬性,您可以使用圖片來創建邊框:

border-image 屬性允許您規定用于邊框的圖片!

用于創建上面的邊框的原始圖片:

用于邊框的圖片

實例

使用圖片創建圍繞 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 */
}

親自試一試

新的邊框屬性

屬性 描述 CSS
border-image 設置所有 border-image-* 屬性的簡寫屬性。 3
border-radius 設置所有四個 border-*-radius 屬性的簡寫屬性。 3
box-shadow 向方框添加一個或多個陰影。 3

如對本文有疑問,請提交到交流論壇,廣大熱心網友會為你解答??! 點擊進入論壇


發表評論 (186人查看,0條評論)
請自覺遵守互聯網相關的政策法規,嚴禁發布色情、暴力、反動的言論。
用戶名: 驗證碼: 點擊我更換圖片
最新評論
------分隔線----------------------------
自拍偷拍福力视频,偷拍国际精品,麻豆一区福利电影,国产网红视频午夜福利,se视频大全,久久国产AV影院 4399看片手机在线高清| 极品粉嫩学生无套视频| 丰满巨肥大屁股bbw| 午夜不卡无码中文字幕影院| a级裸片一毛片不收费| 亚洲丁香五月天缴情综合| 英语老师晚上让我上她| 中年熟女乱子正在播放| 从后面糟蹋成功视频| 更新最快的电影网| 草草视频| tube18中国少妇爽| freevide0x性欧美| 无线资源-国产好片-第2页| japanese18高潮喷水尿| 10后呦女交| 日a级毛片中文字幕无码| 亚洲高清国产拍精品青青草原| 皮皮高清影视| 里番工口全彩同人ACG| 撞开了宫口高H| 免费被靠视频免费观看| 宝贝乖好紧夹得我好爽| 日本 888 xxxx| >Chinesegvfreevideo| 亚洲丶欧美图区偷拍| 人妻无码不卡中文字幕系列| 国产日产韩国精品视频| 宅男宅女播放器| 他的肿胀还留在她的体内| 一本大道香蕉大l在线| http://www.ekartusa.com