<!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;
border-radius:50px;/*四个圆角值都设置为宽度或高度值的一半*/
}
.lit-circle{
height:60px;/*与width设置一致*/
width:60px;
background:#fff;
border-radius:30px;/*四个圆角值都设置为宽度或高度值的一半*/position:absolute;
margin:20px;
}
/*任务部分*/
div.semi-circle{
height:100px;
width:50px;
background:#9da;
border-radius:50px 0px 0px 50px;
}
</style>
</head>
<body>
<div class="circle">
<!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;
border-radius:50px;/*四个圆角值都设置为宽度或高度值的一半*/
}
.lit-circle{
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>
<br/>
<!--任务部分-->
<div class="semi-circle">
</div>
</body>
</html>
我想问下上下代码有啥区别？
<!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外边距合并的问题（来源于http://www.imooc.com/code/380）
相对定位是相对于自身原有位置进行便宜，仍处于标准文档流中。
局对定位脱离了文档流，偏移的参照基准是：有已定位的父元素以父元素为基准，无父元素（即无position）的话以<html>为基准。
无定位的absolute元素可以使用margin定位