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>