码迷,mamicode.com
首页 > 其他好文 > 详细

border-radius属性

时间:2017-12-15 14:06:14      阅读:674      评论:0      收藏:0      [点我收藏+]

标签:顺序   技术分享   椭圆   zha   相同   org   evel   .com   pos   

参考:

CSS属性 border-radius 用来设置边框圆角。

语法

border-radius: 1-4 length|% / 1-4 length|%;

例如:
border-radius: 300px 300px 300px 300px/300px 300px 300px 300px;
以/分隔,第一部分代表水平圆角半径,第二部分代表垂直圆角半径。(顺序为左上、右上、右下、左下。)

  • 只有第一部分时,四个角为圆角;
  • 两个部分都设置时确定一个椭圆,与边框交集形成为椭圆形角(特别的,当某个角的水平值和垂直值相等时,也就为圆角)
    技术分享图片
半径的第一个语法取值可取1~4个值:
/* 四个角相同 */      
border-radius: 10px;  

/*top-left-and-bottom-right  | top-right-and-bottom-left */
/*两个值,第一个为左上(右下相同),第二个为右上(左下相同)*/
border-radius: 10px 5%;  


/*top-left | top-right-and-bottom-left | bottom-right */
/*三个值,分别为左上、右上(左下相同)、右下*/
border-radius: 2px 4px 2px;

/* top-left | top-right | bottom-right | bottom-left */
border-radius: 1px 0 3px 4px;

半径的第二个语法取值也可取1~4个值
/* (first radius values) / radius */
/*椭圆--左上和右下:h=10px, v=20px;右上和左下:h=5%,v=20px*/
border-radius: 10px 5% / 20px;

/* (first radius values) / top-left-and-bottom-right | top-right-and-bottom-left */
border-radius: 10px 5% / 20px 30px;

/* (first radius values) / top-left | top-right-and-bottom-left | bottom-right */
border-radius: 10px 5px 2em / 20px 25px 30%;

/* (first radius values) / top-left | top-right | bottom-right | bottom-left */
border-radius: 10px 5% / 20px 25em 30px 35em;

取值

length | %
【注意点】取值为百分比时,是相对于width/height、padding和border的总尺寸。而不是单纯地相对于width/height值。

.radius-test1 { width: 100px; height: 100px; border: 50px solid #cd0000; border-radius: 50%; }
-----------
<div class="radius-test1></div>

效果图: r=(100px+2x50px)x50%=100px
技术分享图片

(显然,当两部分中某一个取值为0时,此角仍为直角)

border-radius属性

标签:顺序   技术分享   椭圆   zha   相同   org   evel   .com   pos   

原文地址:http://www.cnblogs.com/huolongguo/p/8042640.html

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