首頁(yè) 猿問(wèn) 制作半嵌套圓的最簡(jiǎn)單方法是什么？

制作半嵌套圓的最簡(jiǎn)單方法是什么？

Html5

慕田峪9158850 2023-10-24 21:50:34

我有 4 個(gè)圓圈，我想要它們是如下所示的半圓https://i.stack.imgur.com/7hfx7.png 當(dāng)我嘗試將它們減半時(shí)，下面會(huì)發(fā)生什么我不知道為什么，這就是我在下面嘗試時(shí)的工作原理，我添加了它們 border-top-left-radius 和 border-top-right-radius 以使它們?nèi)砍蔀榘雸A，但只有第一個(gè)起作用，其他的移動(dòng)了如您所見，向右。有沒(méi)有其他方法可以使這個(gè)實(shí)現(xiàn)更容易？https://i.stack.imgur.com/ALvx8.png #first-circle { border-bottom: 0 !important; width: 400px; height: 400px; position: absolute; border: 1px solid #000; border-top-left-radius: 401px !important; border-top-right-radius: 401px !important } #second-circle { position: absolute; border-bottom: 0 !important; width: 300px; height: 300px; border: 1px solid #000; top: 50%; left: 50%; border-top-left-radius: 301px !important; border-top-right-radius: 301px !important margin: -150px 0px 0px -150px; } #third-circle { position: absolute; border-bottom: 0 !important; width: 200px; height: 200px; top: 50%; border: 1px solid #000; left: 50%; border-top-left-radius: 201px !important; border-top-right-radius: 201px !important margin: -100px 0px 0px -100px; } #fourth-circle { position: absolute; border-bottom: 0 !important; width: 100px; height: 100px; border: 1px solid #000; top: 50%; left: 50%; border-top-left-radius: 101px !important; border-top-right-radius: 101px !important margin: -50px 0px 0px -50px; } <div id="first-circle"> <div id="second-circle" > <div id="third-circle" > <div id="fourth-circle" > </div> </div> </div> </div>

查看完整描述

7 回答

肥皂起泡泡

TA貢獻(xiàn)1829條經(jīng)驗(yàn) 獲得超6個(gè)贊

我會(huì)使用變換：

.position-relative {

position: relative;

}

.position-absolute {

position: absolute;

}

.half-circle {

width: 200px;

height: 100px;

border-top-left-radius: 100px;

border-top-right-radius: 100px;

border: 1px solid black;

border-bottom: 0;

box-sizing: border-box;

transform-origin: center bottom;

}

.half-circle:nth-child(2) {

transform: scale(.8);

}

.half-circle:nth-child(3) {

transform: scale(.6);

}

.half-circle:nth-child(4) {

transform: scale(.4);

}

</div>

或者，您可以更改每個(gè)圓圈的寬度和高度并相應(yīng)地放置它們：

.position-relative {

position: relative;

height: 100px;

}

.position-absolute {

position: absolute;

}

.half-circle {

width: 200px;

height: 100px;

border-top-left-radius: 100px;

border-top-right-radius: 100px;

border: 1px solid black;

border-bottom: 0;

box-sizing: border-box;

transform-origin: center bottom;

}

.half-circle:nth-child(2) {

width: 180px;

height: 90px;

border-top-left-radius: 90px;

border-top-right-radius: 90px;

bottom: 0;

left: 10px;

}

.half-circle:nth-child(3) {

width: 160px;

height: 80px;

border-top-left-radius: 80px;

border-top-right-radius: 80px;

bottom: 0;

left: 20px;

}

.half-circle:nth-child(4) {

width: 140px;

height: 70px;

border-top-left-radius: 70px;

border-top-right-radius: 70px;

bottom: 0;

left: 30px;

}

</div>

PS：為了嵌套圓圈，我們不一定需要嵌套html?？梢韵裆厦嬉粯邮褂煤?jiǎn)單的標(biāo)記。另外，如果您不使用 bootstrap-4，那么您可以刪除相對(duì)位置、絕對(duì)位置類，然后為它們提供樣式。

反對(duì) 回復(fù) 2023-10-24

湖上湖

TA貢獻(xiàn)2003條經(jīng)驗(yàn) 獲得超2個(gè)贊

我認(rèn)為這非常簡(jiǎn)單，使用border-radius:50%;、display:flex;和overflow:hidden;：

*{

box-sizing:border-box; font-size:0; /* set font individually due to white space */

}

html,body{

background:#000; margin:0;

}

#container{

width:400px; height:200px; background:#fff; overflow:hidden;

}

#container div{

display:flex; justify-content:center; align-items:center; border-radius:50%;

border:1px solid #000; overflow:hidden;

}

#first-circle{

width:400px; height:400px; background:blue;

}

#second-circle{

width:300px; height:300px; background:red;

}

#third-circle{

width:200px; height:200px; background:orange;

}

#fourth-circle{

width:100px; height:100px; background:yellow;

}

</div>

反對(duì) 回復(fù) 2023-10-24

繁星淼淼

TA貢獻(xiàn)1775條經(jīng)驗(yàn) 獲得超11個(gè)贊

修復(fù)了你的CSS。

首先你錯(cuò)過(guò)了一些分號(hào)，剩下的就是反復(fù)試驗(yàn)：

高度是寬度的一半

上邊距 -50, -25, 0

#first-circle {

border-bottom: 0 !important;

width: 400px;

height: 200px;

position: absolute;

border: 1px solid #000;

border-top-left-radius: 401px !important;

border-top-right-radius: 401px !important;

}

#second-circle {

position: absolute;

border-bottom: 0 !important;

width: 300px;

height: 150px;

border: 1px solid #000;

top: 50%;

left: 50%;

border-top-left-radius: 301px !important;

border-top-right-radius: 301px !important;

margin: -50px 0px 0px -150px;

}

#third-circle {

position: absolute;

border-bottom: 0 !important;

width: 200px;

height: 100px;

top: 50%;

border: 1px solid #000;

left: 50%;

border-top-left-radius: 201px !important;

border-top-right-radius: 201px !important;

margin: -25px 0px 0px -100px;

}

#fourth-circle {

position: absolute;

border-bottom: 0 !important;

width: 100px;

height: 50px;

border: 1px solid #000;

top: 50%;

left: 50%;

border-top-left-radius: 101px !important;

border-top-right-radius: 101px !important;

margin: 0px 0px 0px -50px;

}

反對(duì) 回復(fù) 2023-10-24

jeck貓

TA貢獻(xiàn)1909條經(jīng)驗(yàn) 獲得超7個(gè)贊

由于圓圈共享許多相似的 css，因此您應(yīng)該使用一些類來(lái)使代碼更具可讀性。

為了達(dá)到你想要的效果，你需要確保每個(gè)圓的高度是其寬度的 50%，因?yàn)樗前雸A！

之后，您只需將所有元素對(duì)齊到底部并將它們居中即可。將絕對(duì)定位元素居中的最簡(jiǎn)單方法是使用left和transform: translateX。

.half-circle {

position: absolute;

border: 1px solid #000;

border-bottom: 0;

border-top-left-radius: 400px;

border-top-right-radius: 400px;

}

.inner {

bottom: 0;

left: 50%;

transform: translateX(-50%);

}

#first-circle {

width: 400px;

height: 200px;

}

#second-circle {

width: 300px;

height: 150px;

}

#third-circle {

width: 200px;

height: 100px;

}

#fourth-circle {

width: 100px;

height: 50px;

}

</div>

反對(duì) 回復(fù) 2023-10-24

一只萌萌小番薯

TA貢獻(xiàn)1795條經(jīng)驗(yàn) 獲得超7個(gè)贊

我會(huì)為此使用漸變，而不是元素。為了“封裝”邊框，您需要添加第一個(gè)白色區(qū)域的終點(diǎn)和第二個(gè)白色區(qū)域的起點(diǎn)（--fill-color）。

為了避免增加邊框?qū)挾?(--border-thickness) 時(shí)出現(xiàn)模糊，您需要添加開始值和結(jié)束值來(lái)創(chuàng)建顏色范圍。我在第一個(gè)藍(lán)色圓圈中展示了如何做到這一點(diǎn)。

div { /* mostly for show */

height: 50vw;

background-color: grey;

}

.circles-background {

--fill-color: white;

--border-thickness: 2px;

--half-border-thickness: calc(var(--border-thickness) / 2);

--circles-sizes: 12%;

--border-color: #121212;

--first-circle-border-color: blue;

--first-border-start: calc(var(--circles-sizes) - var(--half-border-thickness));

--first-border-end: calc(var(--circles-sizes) + var(--half-border-thickness));

--second-circle-border-color: red;

--second-border-start: calc(2 * var(--circles-sizes) - var(--half-border-thickness));

--second-border-position: calc(2 * var(--circles-sizes));

--second-border-end: calc(2 * var(--circles-sizes) + var(--half-border-thickness));

--third-circle-border-color: var(--border-color);

--third-border-start: calc(3 * var(--circles-sizes) - var(--half-border-thickness));

--third-border-position: calc(3 * var(--circles-sizes));

--third-border-end: calc(3 * var(--circles-sizes) + var(--half-border-thickness));

--fourth-circle-border-color: purple;

--fourth-border-start: calc(4 * var(--circles-sizes) - var(--half-border-thickness));

--fourth-border-position: calc(4 * var(--circles-sizes));

--fourth-border-end: calc(4 * var(--circles-sizes) + var(--half-border-thickness));

background: radial-gradient(circle at bottom,

var(--fill-color) var(--first-border-start),

var(--first-circle-border-color) var(--first-border-start),

var(--first-circle-border-color) var(--first-border-end),

var(--fill-color) var(--first-border-end),

var(--fill-color) var(--second-border-start),

var(--second-circle-border-color) var(--second-border-position),

var(--fill-color) var(--second-border-end),

var(--fill-color) var(--third-border-start),

var(--third-circle-border-color) var(--third-border-position),

var(--fill-color) var(--third-border-end),

var(--fill-color) var(--fourth-border-start),

var(--fourth-circle-border-color) var(--fourth-border-position),

var(--fill-color) var(--fourth-border-end)

);

}

</div>

反對(duì) 回復(fù) 2023-10-24

倚天杖

TA貢獻(xiàn)1828條經(jīng)驗(yàn) 獲得超3個(gè)贊

您可以嘗試僅使用一個(gè)元素來(lái)執(zhí)行此操作：

.box {

width:300px;

display:inline-flex;

box-sizing:border-box;

border:2px solid;

border-bottom:transparent;

border-radius:1000px 1000px 0 0;

background:

radial-gradient(farthest-side at bottom,transparent 75%,#000 calc(75% + 1px) calc(75% + 2px),transparent calc(75% + 3px)),

radial-gradient(farthest-side at bottom,transparent 50%,#000 calc(40% + 1px) calc(50% + 2px),transparent calc(50% + 3px)),

radial-gradient(farthest-side at bottom,transparent 25%,#000 calc(25% + 1px) calc(25% + 2px),transparent calc(25% + 3px));

}

.box::before {

content:"";

padding-top:50%;

}

反對(duì) 回復(fù) 2023-10-24

GCT1015

TA貢獻(xiàn)1827條經(jīng)驗(yàn) 獲得超4個(gè)贊

您可以嘗試僅使用一個(gè)元素來(lái)執(zhí)行此操作：

.box {

width:300px;

display:inline-flex;

box-sizing:border-box;

border:2px solid;

border-bottom:transparent;

border-radius:1000px 1000px 0 0;

background:

radial-gradient(farthest-side at bottom,transparent 75%,#000 calc(75% + 1px) calc(75% + 2px),transparent calc(75% + 3px)),

radial-gradient(farthest-side at bottom,transparent 50%,#000 calc(40% + 1px) calc(50% + 2px),transparent calc(50% + 3px)),

radial-gradient(farthest-side at bottom,transparent 25%,#000 calc(25% + 1px) calc(25% + 2px),transparent calc(25% + 3px));

}

.box::before {

content:"";

padding-top:50%;

}

反對(duì) 回復(fù) 2023-10-24

7 回答
0 關(guān)注
244 瀏覽

關(guān)注

添加回答

舉報(bào)

0/150

提交

取消

使用 Ctrl+D 可將網(wǎng)站添加到書簽

微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

熱搜

最近搜索清空

制作半嵌套圓的最簡(jiǎn)單方法是什么？

制作半嵌套圓的最簡(jiǎn)單方法是什么？

7 回答

添加回答

制作半嵌套圓的最簡(jiǎn)單方法是什么？