制作圆环问题

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上下不能居中

yiyi30

2016-03-22

源自：十天精通CSS3 2-1

关注问题我要回答

940

操作

收起

5 回答

榎目贵音
2016-04-04

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

0 回复有任何疑惑可以回复我~

收起回答

bobandemma
2016-03-22

<!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>