CSS3 圆角属性 border-radius和-webkit-border-radius使用

jopen 7年前

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>