我有絕對(duì)定位的內(nèi)圓，并且我成功地將它們居中，如下所示。最小的圓內(nèi)也有文本居中。https://i.stack.imgur.com/5lHKK.png 問(wèn)題是當(dāng)我想讓它響應(yīng)時(shí)，這也會(huì)減少寬度。滾動(dòng)條發(fā)生了我不想要的情況，并顯示為紅色標(biāo)簽。我希望在減少寬度時(shí)從左側(cè)和右側(cè)裁剪我的圓圈。我怎樣才能做到這一點(diǎn)？https://i.stack.imgur.com/JPJHG.png body{background-color:blue;} #first-circle { border-radius: 50%; width: 643px; height: 643px; border: 1px solid #FFFFFF; position: absolute; top:28px; border: 1px solid rgba(255, 255, 255); left: 50%; transform: translate(-50%,0); } #second-circle { position: absolute; border-radius: 50%; border: 1px solid rgba(255, 255, 255); width: 508px; height: 508px; top: 50%; left: 50%; margin: -254px 0px 0px -254px; } #third-circle { position: absolute; width: 382px; height: 382px; border: 1px solid rgba(255, 255, 255); box-sizing: border-box; border-radius: 50%; top: 50%; left: 50%; margin: -191px 0px 0px -191px; } #fourth-circle { position: absolute; width: 254px; height: 254px; border: 1px solid rgba(255, 255, 255); box-sizing: border-box; border-radius: 50%; top: 50%; left: 50%; margin: -127px 0px 0px -127px; } #fifth-circle { position: absolute; font-size:14px; width: 128px; height: 128px; text-align: center; color:#fff; border: 1px solid rgba(255, 255, 255,.8); box-sizing: border-box; border-radius: 50%; top: 50%; left: 50%; margin: -64px 0px 0px -64px; }
3 回答
萬(wàn)千封印
TA貢獻(xiàn)1891條經(jīng)驗(yàn) 獲得超3個(gè)贊
像素是最差的單位， 如果您希望文本適合最小的圓圈，則
可以使用，您可以分別為它們分配更大的值vh
body{
background-color:blue;
}
#first-circle {
border-radius: 50%;
width: 90vh;
height: 90vh;
border: 1px solid #FFFFFF;
position: absolute;
top:28px;
border: 1px solid rgba(255, 255, 255);
left: 50%;
transform: translate(-50%,0) , scale(2);
}
#second-circle {
position: absolute;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255);
width: 70vh;
height: 70vh;
top: 10vh;
left: 10vh;
}
#third-circle {
position: absolute;
width: 50vh;
height: 50vh;
top: 10vh;
left: 10vh;
border: 1px solid rgba(255, 255, 255);
box-sizing: border-box;
border-radius: 50%;
}
#fourth-circle {
position: absolute;
width: 30vh;
height: 30vh;
top: 10vh;
left: 10vh;
border: 1px solid rgba(255, 255, 255);
box-sizing: border-box;
border-radius: 50%;
}
#fifth-circle {
position: absolute;
font-size:14px;
width: 10vh;
height: 10vh;
top: 10vh;
left: 10vh;
text-align: center;
color:#fff;
border: 1px solid rgba(255, 255, 255,.8);
box-sizing: border-box;
border-radius: 50%;
}
.text-container{
margin-top:0px;
font-size: 1em;
}
<div id="first-circle">
<div id="second-circle" >
<div id="third-circle" >
<div id="fourth-circle">
<div id="fifth-circle">
<div class="text-container">
</div>
</div>
</div>
</div>
</div>
</div>
眼眸繁星
TA貢獻(xiàn)1873條經(jīng)驗(yàn) 獲得超9個(gè)贊
如果要始終顯示所有圓圈，則必須將所有寬度和高度像素編輯為 vw/vh 以使其隨頁(yè)面縮放。如果要裁剪“圖像”，可以將溢出設(shè)置為隱藏，圓圈將被裁剪。
- 3 回答
- 0 關(guān)注
- 205 瀏覽
添加回答
舉報(bào)
0/150
提交
取消