CSS绘制平滑圆润圆形遇阻，CSS Battle实操求助

我在CSS Battle练习CSS技能时，遇到了曲线无法平滑显示的问题，以下是我尝试的代码：

<div class="outer-circel"><div class="inner-circel"></div></div>
<div class="line"></div>
<style>
  body {
    display: flex;
    background: #FFE4E0; 
    justify-content: center;    
  }     
  
  .outer-circel {    
    width: 300px;
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;    
    background: #E05947;
    border-radius: 100px 100px 0 0;
    transform: rotate(180deg);    
    margin: 100 0 0 0;    
    position: relative
  }

  .inner-circel {    
    width: 190px;      
    aspect-ratio: 1;
    background: #FFE4E0;
    border-radius: 50%;
    margin: 150 0 0 0;
    position: relative
  }  

  .line {
    width: 50px;
    height: 119px;   
    margin: 82 0 0 0;
    background: green;    
    position: absolute
  }
</style>

问题分析 #

1. 圆角半径不匹配：.outer-circel高度为150px、宽度为300px，要形成完美平滑的半圆，圆角半径应等于元素高度（150px），但当前设置为100px，导致曲线过渡生硬。
2. 缺少单位：所有margin属性的值未加px单位，浏览器无法正确解析，造成布局错位。
3. 定位与层级问题：元素定位和层级未合理设置，导致各部分衔接不自然。

修复后的代码 #

<div class="outer-circel"><div class="inner-circel"></div></div>
<div class="line"></div>
<style>
  body {
    display: flex;
    background: #FFE4E0; 
    justify-content: center;    
    margin: 0;
    min-height: 100vh;
    align-items: flex-end;
  }     
  
  .outer-circel {    
    width: 300px;
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;    
    background: #E05947;
    border-radius: 150px 150px 0 0; /* 圆角半径等于高度，形成完美半圆 */
    transform: rotate(180deg);    
    margin-bottom: -75px; /* 旋转后调整位置，与内部圆形衔接 */
    position: relative;
  }

  .inner-circel {    
    width: 190px;      
    aspect-ratio: 1;
    background: #FFE4E0;
    border-radius: 50%;
    position: relative;
    z-index: 1; /* 确保在半圆上方 */
  }  

  .line {
    width: 50px;
    height: 119px;   
    background: #E05947;
    position: absolute;
    bottom: 0;
    z-index: 0;
  }
</style>

关键修复点 #

• 将.outer-circel的border-radius改为150px 150px 0 0，匹配元素高度，实现平滑半圆曲线。
• 为所有margin属性补充px单位，确保布局生效。
• 调整body的align-items为flex-end，并设置.outer-circel的margin-bottom为-75px，让旋转后的半圆与内部圆形自然衔接。
• 添加z-index控制元素层级，确保内部圆形显示在半圆上方。
• 将.line的背景色改为与半圆一致的#E05947，贴合任务需求。

内容的提问来源于stack exchange，提问作者user1960836