码迷,mamicode.com
首页 > Web开发 > 详细

CSS3_边框属性之圆角

时间:2015-08-11 17:55:22      阅读:142      评论:0      收藏:0      [点我收藏+]

标签:

一、border-radius是向元素添加圆角边框:

  border-radius的值不仅能用px单位,你还可以用百分比或者em,但兼容性目前还不太好。(都不能是负值)

  技术分享

   1、border-radius

      设置或检索对象使用圆角边框。

      如果提供四个参数值,将按上左、上右、下右、下左的顺序作用于四个角。

      如果提供一个,将用于全部的于四个角。
      如果提供两个,第一个用于上左、下右,第二个用于上右、下左。
      如果提供三个,第一个用于上左,第二个用于上右、下左,第三个用于下右。
      垂直半径也遵循以上4点。
      对应的脚本特性为borderRadius。
  2、border-top-left-radius
      设置或检索对象的左上角圆角边框。
      如设置border-top-left-radius:5px 10px;
      表示top-left这个角的水平圆角半径为5px,垂直圆角半径为10px。
      对应的脚本特性为borderTopLeftRadius。  
  3、border-top-right-radius
      设置或检索对象的右上角圆角边框。
      如设置border-top-right-radius:5px 10px;
      表示top-right这个角的水平圆角半径为5px,垂直圆角半径为10px。
      对应的脚本特性为borderTopRightRadius。
  4、border-bottom-right-radius  

        设置或检索对象的左下角圆角边框

      如设置border-bottom-right-radius:5px 10px;
      表示bottom-right这个角的水平圆角半径为5px,垂直圆角半径为10px。
      对应的脚本特性为borderBottomRightRadius
  5、border-bottom-left-radius
      设置或检索对象的左下角圆角边框。
      如设置border-bottom-left-radius:5px 10px;
      表示bottom-left这个角的水平圆角半径为5px,垂直圆角半径为10px。
      对应的脚本特性为borderBottomLeftRadius。

 

 

 

二、使用方法 

   设定一个值会同时设定四个角的圆角都一样(四个半径值分别是左上角、右上角、右下角和左下角,顺时针)
   如果圆角的半径相同,每个值可以只写一个参数,相当于写2个一样的参数 例如 30px/30px 和30px 是等同的
<style>
    .box1{ padding:10px;width:180px;height:80px;border:2px solid red;border-radius:20px;}  
    .box2{ padding:10px;width:180px;height:80px;border:2px solid red;border-radius:10px 20px 30px 40px;}
</style>
</head>
<body>
    <div class="box1"></div>    
    <div class="box2"></div>    
</body>
<style>
    div{width:180px;height:80px;border:2px solid red;padding:10px;border-radius:20px/20px 40px 80px;}
    /*20px代表左上角,40px代表右上角和左下角,80px代表右下角*/
</style>
</head>
<body>
    <div></div>
</body>
<style>
    div{ padding:10px; width:180px;height:80px;border:2px solid red; border-radius:20px 40px 80px 100px/20px 40px 80px 100px;}
    /*20px 代表左上角的垂直半径,40px 代表右上角的垂直半径,80px 代表右下角的垂直半径,100px 代表左下角的垂直半径*/
</style>
</head>
<body>
    <div></div>    
</body>

 

CSS3_边框属性之圆角

标签:

原文地址:http://www.cnblogs.com/LO-ME/p/4721323.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!