亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

制作半嵌套圓的最簡單方法是什么？

制作半嵌套圓的最簡單方法是什么？

慕田峪9158850 2023-10-24 21:50:34
我有 4 個圓圈，我想要它們是如下所示的半圓https://i.stack.imgur.com/7hfx7.png 當我嘗試將它們減半時，下面會發生什么我不知道為什么，這就是我在下面嘗試時的工作原理，我添加了它們 border-top-left-radius 和 border-top-right-radius 以使它們全部成為半圓，但只有第一個起作用，其他的移動了如您所見，向右。有沒有其他方法可以使這個實現更容易？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貢獻1829條經驗 獲得超6個贊

我會使用變換：


.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 class="position-relative">

  <div class="half-circle position-absolute"></div>

  <div class="half-circle position-absolute"></div>

  <div class="half-circle position-absolute"></div>

  <div class="half-circle position-absolute"></div>

</div>

或者，您可以更改每個圓圈的寬度和高度并相應地放置它們：

.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 class="position-relative">

      <div class="half-circle position-absolute"></div>

      <div class="half-circle position-absolute"></div>

      <div class="half-circle position-absolute"></div>

      <div class="half-circle position-absolute"></div>

    </div>

PS：為了嵌套圓圈，我們不一定需要嵌套html?？梢韵裆厦嬉粯邮褂煤唵蔚臉擞?。另外，如果您不使用 bootstrap-4，那么您可以刪除相對位置、絕對位置類，然后為它們提供樣式。



查看完整回答
反對 回復 2023-10-24
?
湖上湖

TA貢獻2003條經驗 獲得超2個贊

我認為這非常簡單，使用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 id='container'>

  <div id='first-circle'>

    <div id='second-circle'>

      <div id='third-circle'>

        <div id='fourth-circle'></div>

      </div>

    </div>

  </div>

</div>


查看完整回答
反對 回復 2023-10-24
?
繁星淼淼

TA貢獻1775條經驗 獲得超11個贊

修復了你的CSS。


首先你錯過了一些分號，剩下的就是反復試驗：


高度是寬度的一半


上邊距 -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;

 }



查看完整回答
反對 回復 2023-10-24
?
jeck貓

TA貢獻1909條經驗 獲得超7個贊

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


為了達到你想要的效果，你需要確保每個圓的高度是其寬度的 50%，因為它是半圓！


之后，您只需將所有元素對齊到底部并將它們居中即可。將絕對定位元素居中的最簡單方法是使用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 id="first-circle" class="half-circle">

    <div id="second-circle" class="half-circle inner">

        <div id="third-circle" class="half-circle inner">

            <div id="fourth-circle" class="half-circle inner">

            </div>

        </div>

    </div>

</div>


查看完整回答
反對 回復 2023-10-24
?
一只萌萌小番薯

TA貢獻1795條經驗 獲得超7個贊

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


為了避免增加邊框寬度 (--border-thickness) 時出現模糊，您需要添加開始值和結束值來創建顏色范圍。我在第一個藍色圓圈中展示了如何做到這一點。


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 class="circles-background">


</div>


查看完整回答
反對 回復 2023-10-24
?
倚天杖

TA貢獻1828條經驗 獲得超3個贊

您可以嘗試僅使用一個元素來執行此操作：


.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%;

}

<div class="box"></div>

<div class="box" style="width:200px;"></div>

<div class="box" style="width:100px;"></div>


查看完整回答
反對 回復 2023-10-24
?
GCT1015

TA貢獻1827條經驗 獲得超4個贊

您可以嘗試僅使用一個元素來執行此操作：


.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%;

}

<div class="box"></div>

<div class="box" style="width:200px;"></div>

<div class="box" style="width:100px;"></div>


查看完整回答
反對 回復 2023-10-24
  • 7 回答
  • 0 關注
  • 246 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號