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

最新推荐文章于 2023-09-11 08:39:06 发布

???Sir

最新推荐文章于 2023-09-11 08:39:06 发布

阅读量148

点赞数

原文链接：http://www.cnblogs.com/myhomepages/p/6010086.html

版权

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按钮圆边（http://www.manongjc.com）</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>

参考阅读：

http://www.manongjc.com/article/1200.html

http://www.manongjc.com/article/1202.html

转载于:https://www.cnblogs.com/myhomepages/p/6010086.html

???Sir

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3 圆角属性 border-radius和-webkit-border-radius使用

CSS3 圆角属性 border-radius在 CSS3 中新增了一个 border-radius 边框半径属性，即大家常用的圆角效果。这使得制作圆角将不再麻烦，只需对所用对象加一个 border-radius 属性即可，不必使用图片定位或冗余代码完成了。不过它的使用瓶颈目前也是显而易见的，因为效果显示需支持 CSS3 的现代浏览器，而在一些老版本浏览器上则无...
复制链接

扫一扫