首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

border-201311010

2013-11-18 
border--201311010border:又叫边框属性border-radius支持 ie 谷歌 火狐 欧友box-shadow支持 ie 谷歌 火狐

border--201311010
border:又叫边框

属性

border-radius支持 ie 谷歌 火狐 欧友
box-shadow支持 ie 谷歌 火狐 欧友
border-image    支持 ie(不支持) 谷歌 火狐 欧友

border-radius属性

在 CSS2 中添加圆角矩形需要技巧。我们必须为每个圆角使用不同的图片。
在 CSS3 中,创建圆角是非常容易的。
在 CSS3 中,border-radius 属性用于创建圆角

<!DOCTYPE html><html><head><style> div{border:15px solid transparent;width:300px;padding:10px 20px;}#round{-moz-border-image:url(/i/border.png) 30 30 round;/* Old Firefox */-webkit-border-image:url(/i/border.png) 30 30 round;/* Safari and Chrome */-o-border-image:url(/i/border.png) 30 30 round;/* Opera */border-image:url(/i/border.png) 30 30 round;}#stretch{-moz-border-image:url(/i/border.png) 30 30 stretch;/* Old Firefox */-webkit-border-image:url(/i/border.png) 30 30 stretch;/* Safari and Chrome */-o-border-image:url(/i/border.png) 30 30 stretch;/* Opera */border-image:url(/i/border.png) 30 30 stretch;}</style></head><body><div id="round">这里图片铺满整个边框</div><br><div id="stretch">这里图片被拉伸以填充该区域</div><p>这是使用的图片:</p><img src="/i/border.png"><p>border-image 属性规定了用作边框的图片</p></body></html>


Internet Explorer 不支持 border-image 属性

热点排行