Css3中边框的处理

Css3的边框属性

Css3的圆角边框

<!DOCTYPE html> <html> <head> <style> div { text-align:center; border:2px solid #a1a1a1; padding:20px 50px; background:blue; width:350px; border-radius:25px; -moz-border-radius:25px; /* 老的 Firefox */ } </style> </head> <body> <div>border-radius 属性允许您向元素添加圆角。</div> </body> </html>

Css3边框阴影

<!DOCTYPE html> <html> <head> <style> div { width:300px; height:100px; background-color:#ff9900; -moz-box-shadow: 10px 10px 5px #888888; /* 老的 Firefox */ box-shadow: 10px 10px 5px #888888; } </style> </head> <body> <div></div> </body> </html>

Css3图片边框

<!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><b>注释：</b> Internet Explorer 不支持 border-image 属性。</p> <p>border-image 属性规定了用作边框的图片。</p> </body> </html>