从CSS3开始,增加了一个border-radius圆角的样式效果,大大增加了圆角控前端的开发便利,IE9以上及其它主流浏览器器均支持。
1、CSS3中的圆角标记:
border-radius
2、语法结构:
div{border-radius:3px 0;}
3、设置DIV对象四个角均为3像素圆角:
div{border-radius:3px;}
4、设置DIV对象右上角及左下角均为3像素,其它两个角为0不设置为圆角:
div{border-radius:0 0 3px 3px;}
5、完整HTML案例 本文来自于广州地理信息网:http://www.gzgis.com
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>对象圆角 在线演示 DIVCSS5 VIP</title> <link href="images/style.css" rel="stylesheet" type="text/css" /> <!-- www.divcss5.com --> </head> <body> <div>盒子左上角和右上角对象圆角测试</div> <div class="box">DIV盒子圆角</div> <div>盒子对象个角圆角测试</div> <div class="box3">DIV盒子圆角</div> <p> </p> <div>图片对象圆角测试</div> <div class="box2"><img src="images/divcss5-logo.gif" /></div> </body> </html>