制作圓環問題

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

關注問題我要回答

979

操作

收起

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>

因為你直接給內層設置margin-top會發生外邊距合并，具體的你可以去了解一下關于css外邊距合并的問題

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

收起回答

WWEEBB
2016-03-22

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