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

border-radius

时间:2014-09-24 14:50:36      阅读:195      评论:0      收藏:0      [点我收藏+]

标签:style   blog   color   ar   div   sp   c   log   代码   

1.用border-radius画圆 

实心圆 

画实心圆的方法是高度和宽度相等,并且把border的宽度设为高度和宽度的一半。代码如下。 

#circle { 
width: 200px; 
height: 200px; 
background-color: #a72525; 
-webkit-border-radius: 100px; 
} 

空心圆

画空心圆和画实心圆的方法差不多,只是border的宽度只能小于高度和宽度的一半。代码如下。 

#circle { 
width: 200px; 
height: 200px; 
background-color: #efefef; /* Can be set to transparent */ 
border: 3px #a72525 solid; 
-webkit-border-radius: 100px; 
} 

虚线圆

#circle { 
width: 200px; 
height: 200px; 
background-color: #efefef; /* Can be set to transparent */ 
border: 3px #a72525 dashed; 
-webkit-border-radius: 100px 100px 100px 100px; 
} 

 

border-radius

标签:style   blog   color   ar   div   sp   c   log   代码   

原文地址:http://www.cnblogs.com/compete/p/3990493.html

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