在css3.0中,又添加了一个新的属性border-radius,使用border-radius这个属性可以实现圆角边框的效果。除IE和遨游外,目前有Firefox ,Safari,Chrome,Opera支持该属性,其Safari,Chrome,Opera是支持最好的,依照了w3c的标准,仅仅使用border-radius,就可以实现效果,无需加入前缀-webkit。而火狐依然需要加上前缀-moz。 即: Firefox支持border-radius(圆角):-moz-border-radius:10px; webkit内核的Safari和Chrome支持border-radius(圆角):-webkit-border-radius:10px; Opera支持border-radius(圆角):border-radius:10px; IE不支持border-radius(圆角) 效果图:(IE和遨游不支持!) 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>圆角效果border-radius</title> <style type="text/css"> body,div{margin:0;padding:0;} .border{width:200px;border:10px solid gray;height:20px; -moz-border-radius:10px;/*仅Firefox支持,实现圆角效果*/ -webkit-border-radius:10px;/*仅Safari,Chrome支持,实现圆角效果*/ -khtml-border-radius:10px;/*仅Safari,Chrome支持,实现圆角效果*/ border-radius:10px;/*仅Opera,Safari,Chrome支持,实现圆角效果*/ } </style> </head> <body> <div class="border">border radius</div> </body> </html> 再此我们还可以随意指定圆角的位置,上左,上右,下左,下右四个方向。 在firefox、webkit内核的Safari,Chrome和 Opera的具体书写格式如下: 上左效果: -moz-border-radius-topleft / -webkit-border-top-left-radius / border-top-left-radius 上左 上右效果: -moz-border-radius-topright / -webkit-border-top-right-radius / border-top-right-radius 上右 下左效果: -moz-border-radius-bottomleft / -webkit-border-bottom-left-radius / border-bottom-left-radius 下左 下右效果: -moz-border-radius-bottomright / -webkit-border-bottom-right-radius /border-bottom-right-radius 下右 然后我们可以做些效果: 例如常见的 标题栏 仅仅需要在上面用到圆角效果,如图: 代码 : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>圆角效果border-radius</title> <style type="text/css"> .border{width:120px;border:15px solid gray;height:20px; background:gray;color:#fff; -moz-border-radius-topright:15px; -moz-border-radius-topleft:15px; -webkit-border-top-right-radius:15px; -webkit-border-top-left-radius:15px; border-top-right-radius:15px; border-top-left-radius:15px; } </style> </head> <body> <div class="border">border radius</div> </body> </html> 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>圆角效果border-radius</title> <style type="text/css"> .border{width:120px;border:15px solid gray;height:20px; background:gray;color:#fff; -moz-border-radius-topright:15px; -moz-border-radius-bottomleft:15px; -webkit-border-top-right-radius:15px; -webkit-border-bottom-left-radius:15px; border-top-right-radius:15px; border-bottom-left-radius:15px; } </style> </head> <body> <div class="border">border radius</div> </body> </html> 万变不离其宗,仅仅需要改下的border-radius的方向,就可以实现一些很有用的效果,代码变的越来越简单。
相关推荐
让IE实现CSS3中的border-radius(圆角)
01-边框圆角border-radius.html
实现边框圆角 -moz-border-radius: 32px; -webkit-border-radius: 32px; border-radius: 32px; behavior: url(border-radius.htc); 复制代码代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//...
以前想实现一个圆角是比较麻烦的,不过现在CSS3来了,实现圆角变的那么的简单只需要一句话:border-radius即可。下面青岛星网跟大家分享下:border-radius的具体用法。
border-radius:用这个属性能实现圆角边框的效果。现在只有Mozilla/Firefox 和 Safari 3支持该属性。
border-radius:10px; /* 所有角都使用半径为10px的圆角 */ border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角,顺时针 */ 不要以为border-radius的值只能用px单位,你还可以用...
主要介绍了CSS3中border-radius属性设定圆角的使用技巧,border-radius的作用不止是最常用的圆角矩形,我们还可以利用它设置弧度来制作其他弧线边框图形,需要的朋友可以参考下
border-radius:10px; /* 所有角都使用半径为10px的圆角 */ border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角,顺时针 */ 不要以为border-radius的值只能用px单位,你还可以用...
用CSS3的border-radius属性来制作圆角边框相当顺手,然而浏览器的兼容问题并不是太好处理,这里我们就来总结一下border-radius以外的CSS圆角边框制作方法.
CSS3 border-radius 属性:向 div 元素添加圆角边框: 一:首先建立一个div 二:给div设置圆角边框的弧度 三:给div设置弧度为50%的时候 正方形就会变为圆形 四:如果给长方形设置50%的弧度 就会得到椭圆形 5:...
太极图border-radius 除了做边框圆角效果之外,把它用在画图示上的话,其实能产生出很多不同的创意哩。笔者今天要继续使用它来教各位画-太极图。 检视原始码 HTML XML/HTML Code复制内容到剪贴板 <body> ...
本文的学习要点如下: •圆角 border-radius ... <div>border-radius 属性允许您为元素添加圆角边框! div { width: 200px; height: 100px; padding:20px; border: 1px solid red; border-r
css3中的边框一般多为矩形,也可以通过设置实现圆角边框的效果,通过border-radius:;通过设置该属性值得大小改变边框的圆角大小,从而达到自己需要的圆角边框效果
border-radius向元素添加圆角边框,css3中的。IE9+ chrome safari5+ firefox4+ 现在都支持。可以向input div等设置边框。与border相似,可以四个角一起设置,也可以单独设置。 语法: 复制代码代码如下:border-...
css3六边形,可设置border与border-radius 结果 查看 捕获 大小和边框宽度 您可以按比例更改六边形的大小和边框宽度。 要在此处更改css文件。 -webkit-transform : rotate ( -30 deg ) skewX ( 30 deg ) scale ( ...