制作圆环问题

个回答

榎目贵音

2016-04-04 15:36:15

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

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
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
呵呵呵啦啦啦

2016-03-22 14:55:04

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

0
jarvischn

2016-03-22 14:39:49

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

0