CSS3 圆角属性 border-radius
在 CSS3 中新增了一个 border-radius 边框半径属性,即大家常用的圆角效果。这使得制作圆角将不再麻烦,只需对所用对象加一个 border-radius 属性即可,不必使用图片定位或冗余代码完成了。不过它的使用瓶颈目前也是显而易见的,因为效果显示需支持 CSS3 的现代浏览器,而在一些老版本浏览器上则无法显示,如IE8及以下浏览器就不行。
CSS3 圆角属性 border-radius 使用方法:
同时设置四个圆角只需给出一个值即可:border-radius: 10px;
也可以同时单独设置每一个圆角(顺时针方向):border-radius: 10px 5px 15px 20px;
如果只需设置一个圆角,可以写单独CSS设置:
border-top-left-radius: 10px;
border-top-right-radius: 5px;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 20px;
还可以每两个圆角设置,即左上右下一个值,右上左下一个值:border-radius: 10px 5px;
CSS3 圆角属性 border-radius 使用注意:
CSS3 部分属性在某些旧版本浏览器上的对应设置有时也不一样,有自己的私有属性,比如部分属性在Firefox上应用需要加上-moz-、Safari以及Google Chrome需加上-webkit-、Opera需加上-o-、Internet Explorer 9需加上-ms-。不过这些问题随着 CSS3 发布推荐标准后,这些浏览器在新版本上都已经做了修改,以支持 CSS3 原生属性。
为了照顾这些旧版本浏览器的浏览,我们可以一并加上这些私有属性。注意,border-radius 需放在最后面,不然可能会失效。如下(border-radius 属性Opera和IE不用设置):
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
此外还需注意的是,Firefox旧版本上的 border-radius 单个圆角属性名称也不一样,它们分别是:
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomleft: 15px;
-moz-border-radius-bottomright: 20px;
最后还有一点要提示的是:设置 border-radius 属性,最好每个圆角都采用相同的值,如果分别设置,可能在不同浏览器上渲染效果可能会有细微差别
<!--html5的标准--> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>css3按钮圆边</title> <style> .font-label{ font-weight: bold; } .input-text{ border: 1px solid #C3CED9; border-radius: 5px 5px 5px 5px;/**左上角-右上角-左下角-右下角*/ } .btn-login{ cursor: pointer; display: inline-block; position: relative; border-radius: 2px; font-weight: lighter; width:88px; padding-top: 0px 2px ; margin-bottom: 0px 2px; -moz-border-radius: 50px;/**兼容火狐浏览器*/ -webkit-border-radius: 50px;/**兼容苹果;谷歌,等一些浏览器认*/ -o-border-radius: 50px;/**兼容opera浏览器*/ background-color:#03F; margin:0 0 0 10px; /***背景色渐变**/ background:-webkit-linear-gradient(top,#03F,#9dccdc); background: -moz-linear-gradient(top,#03F,#9dccdc); background:-o-linear-gradient(top,#03F,#9dccdc); background:linear-gradient(top,#03F,#9dccdc); } </style> </head> <body> <div align="center"> <span class="font-label">用户名:</span> <input type="text" placeholder="请输入用户名" class="input-text"/> <br/> <span class="font-label">密 码:</span> <input type="text" placeholder="请输入密码" class="input-text"/> <br/> <input type="reset" class="btn-login" value="重置" /> <input type="button" class="btn-login" value="登录" /> </div> </body> </html>
相关推荐
border-radius CSS3中的代表——第一个在社区中得到广泛使用新属性。这意味着,除去Internet Explorer 8及更低版本,所有的浏览器可以显示圆角。为了使样式能正确应用,需要为Webkit和Mozilla内核添加前缀。 CSS ...
-webkit-border-radius: 32px; border-radius: 32px; behavior: url(border-radius.htc); 复制代码代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” ...
前面系统总结了CSS3中Gradient和RGBA的用法,今天我们在一起来看看CSS3中制作圆角的属性border-radius的具体用法。在CSS2中,大家都碰到过圆角的制作。当时,对于圆角的制作,我们都需要使用多张圆角图片做为背景,...
-moz-border-radius:moz这个属性 主要是专门支持Mozilla Firefox 火狐浏览器的CSS属性。 在这两个属性有值的时候,去掉哪个属性,对用他们做内核的浏览器就有影响,如果没值的话,就没影响,这两个属性和,IE,和...
二、个性化圆角 #container { -webkit-border-top-left-radius: 4px;... -moz-border-radius-topright: 3px; -moz-border-radius-bottomright: 6px; -moz-border-radius-bottomleft: 10px; }
太极图border-radius 除了做边框圆角效果之外,把它用在画图示上的话,其实能产生出很多不同的创意哩。笔者今天要继续使用它来教各位画-太极图。 检视原始码 HTML XML/HTML Code复制内容到剪贴板 <body> ...
随着网络的发展,CSS 也在不断的完善,充分吸取多年来 Web 发展的需求,提出了很多新颖的 CSS 特性,例如很受欢迎的圆角矩形 border-radius 属性,但很可惜,此属性目前没有得到任何浏览器的支持。 对于一些浏览器,...
css3六边形,可设置border与border-radius 结果 查看 捕获 大小和边框宽度 您可以按比例更改六边形的大小和边框宽度。 要在此处更改css文件。 -webkit-transform : rotate ( -30 deg ) skewX ( 30 deg ) scale ( ...
}.rad-bl{ -moz-border-radius-bottomleft:10px; -webkit-border-bottom-left-radius:10px; border-bottom-left-radius:10px;}.rad-br{ -moz-border-radius-bottomright:10px; -webkit-border-bottom-right-radius:...
让IE支持圆角和阴影的文件 CSS这样写 <style type="text/css"> #DIVID{ -moz-border-radius: 11px; -khtml-border-radius: 11px; -webkit-border-radius: 11px; border-radius: 11px; behavior: url(ie-css3....
border-radius向元素添加圆角边框,css3中的。IE9+ chrome safari5+ firefox4+ 现在都支持。可以向input div等设置边框。与border相似,可以四个角一起设置,也可以单独设置。 语法: 复制代码代码如下:border-...
解决CSS3圆角兼容所有浏览器的方法,该脚本的最大优势是可以在Safari/Chrome/Firefox中使用原生的CSS3属性(通过-webkit-border-radius和-moz-border-radius私有属性分别支持)而在IE和Opera中使用JavaScript。...
随着网络的发展,CSS 也在不断的完善,充分吸取多年来 Web 发展的需求,提出了很多新颖的 CSS 特性,例如很受欢迎的圆角矩形 border-radius 属性,但很可惜,此属性目前没有得到任何浏览器的支持。 对于一些浏览器,...
1. 圆角效果 CSS3 新功能中最常用的一项是圆角效果,标准 HTML 方块对象是90度方角的,CSS3 可以帮你实现圆角。 1.moz-border-radius: 20px; 2.webkit-border-radius:...3.moz-border-radius-bottomleft: 10px; 4.
Border-radius是一大堆CSS3属性中最受欢迎的一种,border-radius是CSS3中级别最高的一个属性。当设计者害怕一个层在将在不同的浏览器之间以不同的方式显示时,CSS圆角,一个很初级的知识,将引导他们开始学习。 我们...
在css3中,直接在图片上使用box-shadow 和 border-radius,浏览器并不能很好的渲染。但是如果把图片作为background-image,添加的样式浏览器可以很好的渲染。我将会介绍如何使用box-shadow, border-radius 和 ...
在本文中,让我们看看如何使用CSS3 border-radius来实现圆角DIV。 页面中圆角的实现是个很头疼的问题,虽然现在有很多种实现方法,但是都是比较麻烦的。在本文中,让我们看看如何使用CSS3 border-radius来实现圆角...
css3.0增加的新属性,如投影、渐变、旋转、圆角等等!这些新标准属性在ie6、ie7、ie8浏览器版本里得不到很好的支持,相信ie以后的新版本也会支持这些新属性的。目前ie6、ie7、ie8浏览器不支持这些属性并不能说明ie就...
以下就是这些写法的详细介绍。所有代码都经过了Firefox 3.6和IE 8.0的验证。 一、圆角(Rounded Corner) 复制代码代码如下: .box_round { -moz-border-...遗憾的是,目前所有的IE都不支持CSS圆角,要等到IE 9才行。