画一个皮卡丘项目小结（2）

前言

继续总结过程中学到的新知识，这是第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的所有细节;