@media all and (max-width: 600px){
  div.box {
  /*使用padding和hidden的特性代替height实现宽高成比例
  height: 0;
  padding-bottom: 60%;
  然后蓝莓突然良心发现，内容撑起边框岂不更好，这东西太暴力了(･_･;*/
    width: 80%;
    border-radius: 2.78px;
    margin: 17.8px auto;
  }
  div.box img {
    width: 30%;
    margin: 5%;
    border-radius: 10.8px;
  }
  div.moha, div.moha div.moha {
    border-radius: 100%/10%;
    box-shadow: 0px 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset;
  }
}
@media all and (min-width: 600px){
  div.box {
    width: 200px;
    float:left;
    display:inline-block;
    border-radius: 2.78px;
    margin: 17.8px 5px;
  }
  div.box img {
    width: 40%;
    margin: 5%;
    border-radius: 10.8px;
  }
  div.moha div.moha {
    border-radius: 100%/10%;
    box-shadow: 0px 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset;
  }
}
/*代码辣鸡非我意,
  自已动手分田地;
  你若气死谁如意?
  谈笑风生活长命.*/
div.moha{border-radius: 100%/3.5%;}
div.box {
  text-align: center;
  background: #fff;
  overflow: hidden;
  text-shadow: 0 0 2.53px black;
}
div.box a:active, div.box a:hover {
  text-shadow: 0 0 4.57px black;
  text-decoration: none;
}
div.box a:link, div.box a:visited {
  border-radius: 8.5px;
  top: 3.64px;
  position: relative;
}
div.box img {
  overflow: hidden;
  max-width: 100%;
  max-height: 100%;
}
div.card {position: relative;}
div.card:after, div.card:before {
  z-index: -1;
  content: '';
  background: #f00;
  position: absolute;
  top:50%;bottom:0;left: 10px;right:10px;
  border-radius: 100px/10px;
}