制作圆环问题-慕课网

首页课程实战体系课手记专栏慕课教程

制作圆环问题

来源：2-1 CSS3边框圆角效果 border-radius

yiyi30

2016-03-22 12:09

div.circle{

height:100px;/*与width设置一致*/

width:100px;

background:#9da;

border-radius:50px;/*四个圆角值都设置为宽度或高度值的一半*/

}

.lit-circle{

margin:20px;

height:60px;/*与width设置一致*/

width:60px;

background:#fff;

border-radius:30px;/*四个圆角值都设置为宽度或高度值的一半*/

}

想做一个圆环，为什么里面的圆用margin上下不能居中

写回答关注

5回答

榎目贵音

2016-04-04 15:36:15

简单来说，给外层DIV设置一个边框或者内边距就能完美解决外边距合并的问题，当然外层DIV相对定位内层DIV绝对定位的方法也是可以的

0 0
bobandemma

2016-03-22 15:09:39

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>border-radius</title>
<style type="text/css">
div.circle{
height:100px;/*与width设置一致*/
width:100px;
background:#9da;
position:relative;
border-radius:50px;/*四个圆角值都设置为宽度或高度值的一半*/
}
.lit-circle{
position:absolute;
top:20px;
left:20px;
height:60px;/*与width设置一致*/
width:60px;
background:#fff;
border-radius:30px;/*四个圆角值都设置为宽度或高度值的一半*/
}
/*任务部分*/
div.semi-circle{
height:100px;
width:50px;
background:#9da;
border-radius:50px 0px 0px 50px;
}

</style>
</head>
<body>
<div class="circle">
<div class="lit-circle"></div>
</div>
<br/>

<div class="semi-circle">
</div>

</body>
</html>
这个要用绝对定位，或者通过给外层的div设置padding
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>border-radius</title>
<style type="text/css">
div.circle{
height:80px;/*与width设置一致*/
width:80px;
background:#9da;
padding: 10px;
position:relative;
border-radius:50px;/*四个圆角值都设置为宽度或高度值的一半*/
}
.lit-circle{

position:absolute;
top:20px;
left:20px;
height:60px;/*与width设置一致*/
width:60px;
background:#fff;
border-radius:30px;/*四个圆角值都设置为宽度或高度值的一半
}
/*任务部分*/
div.semi-circle{
height:100px;
width:50px;
background:#9da;
border-radius:50px 0px 0px 50px;
}

</style>
</head>
<body>
<div class="circle">
<div class="lit-circle"></div>
</div>
<br/>

<div class="semi-circle">
</div>

</body>
</html>
因为你直接给内层设置margin-top会发生外边距合并，具体的你可以去了解一下关于css外边距合并的问题

0 0
WWEEBB

2016-03-22 14:58:41

/*任务部分*/
div.semi-circle{
height:100px;
width:100px;
background:#9da;
border-radius:100px ;
border:25px solid red;
text-align: center;
}

0 0
呵呵呵啦啦啦

2016-03-22 14:55:04

外面的宽不要写死，
圆角写成:border-radius: 50%;

0 0
jarvischn

2016-03-22 14:39:49

外边距合并了，把圆角属性去掉就能明显的观察到，要想做圆环可以试试绝对定位，或者消除外边距合并的其他方法。什么是外边距合并？看这个链接http://www.w3school.com.cn/css/css_margin_collapsing.asp

0 0