前言

繼續總結過程中學到的新知識，這是第2部分。

一 畫一個傾斜的 弧度

.upperLip{
  width: 80px;               /*設置上嘴唇的寬高*/
  height: 20px;
  border: 3px solid black;
  }
  
.upperLip.left{
  border-bottom-left-radius: 40px 20px;   /*設置左下角圓弧*/
  border-top: none;
  border-right: none;
  transform: rotate(-20deg);         /*設置整體一個旋轉角度*/
}

二 在弧度下畫一個橢圓，只顯示一部分

1 先形成一個橢圓：

.lowerLip{
  width: 300px;              /*決定了橢圓的寬度*/
  height: 3500px;
  background: #fc4a62;
  border-radius: 200px/2000px;    /*簡寫形式，水平半徑和垂直半徑*/
  border:2px solid black;
  
  position: absolute;
  bottom: 0;        /*距離相對元素下面0,即上移至相對元素底對齊*/   
  left: 50%;
  margin-left: -150px;    /*水平居中對齊*/ 
  z-index: -1;
}
 

2 隱藏橢圓多的部分：

設置容器絕對定位：

.lowerLip-wrapper{
  height: 110px;      /*設置框的高度，使框的高度與 相對元素底對齊*/
  width: 300px;   
  position: absolute;
  bottom: 0;      /*距離相對元素下面0,即上移至 相對元素底對齊*/  
  left: 50%;
  margin-left: -150px;
  z-index: -1;

  /* border: 1px solid red; */   /*設置完overflow隱藏後，註釋掉*/ 
  overflow: hidden;  /*設置隱藏超出範圍框的部分*/ 
}
 

設置內容（橢圓）絕對定位：

.lowerLip{
  width: 300px;
  height: 3500px;
  background: #fc4a62;
  border-radius: 200px/2000px;    /*簡寫形式，水平半徑和垂直半徑*/
  border:2px solid black;

  position: absolute;
  bottom: 0;     
}

3 隱藏圓弧上方的部分：

設置胡子（div邊框）的背景色

.upperLip{
  width: 80px;
  height: 25px;                /*調整高度 和頂部距離*/
  border: 2px solid black;
  position: absolute;
  top: 50px;                   /*調整高度 和頂部距離*/
  background:#fee433;   /*隱藏嘴唇上方的部分，即全屏背景色的背景色 覆蓋*/
}

三 形成圓上方發不規則陰影部分

轉變思路，視為：圓弧下方，再增加一個橢圓圓弧即可。

.lowerLip{
  overflow: hidden;      /*隱藏小圓的多余部分*/
}


.lowerLip::after{
  content: ‘‘;
  width: 100px;
  height: 100px;
  background: #fc4a62;

  position: absolute;
  bottom: -20px;                /*使小橢圓和大橢圓 離開一段距離*/
  left: 50%;
  margin-left: -50px;
  border-radius: 50%;
}

四 Reference

??1 搞懂Z-index的所有細節;

畫一個皮卡丘項目小結（2）