前端知识点系列 ---- 实现椭圆，半椭圆，圆弧

 

 /* 半个椭圆  水平半径/垂直半径 */
div {
  height: 50px;
  background: linear-gradient(
    to right,
    rgba(254, 172, 94, 0.5),
    rgba(199, 121, 208, 0.5)
  );
  border-radius: 50% / 0 0 100% 100%;

}

  /* 椭圆 */
div{
    height: 100px;
    background: linear-gradient(
    to right,
    rgba(254, 172, 94, 0.5),
    rgba(199, 121, 208, 0.5)
  );
  border-radius: 50% / 50%;
}

 

.login-top {
  height: 200px;
  background: linear-gradient(
    to right,
    rgba(254, 172, 94, 0.5),
    rgba(199, 121, 208, 0.5)
  );

  border-radius: 50% / 0 0 20% 20%;
}