闲着无聊，CSS画个小熊猫-CSDN博客

本文链接：https://blog.csdn.net/weixin_48240002/article/details/127333765

代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>panda</title>
</head>

<body>
  <div class="contain">
    <figure class="panda">
    </figure>
  </div>

</body>

</html>
<style>
  .contain {
    width: 31em;
    height: 26em;
    background-color: rgb(24, 145, 135);
    border-radius: 5%;
    margin-top: 100px;
    margin-left: 40%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .panda {
    width: 21em;
    height: 16em;
    background-color: white;
    border-width: 3px 3px 6px 6px;
    border-style: solid;
    border-color: black;
    border-radius: 11em 11em 11em 11em/11em 11em 6em 6em;
    position: relative;
    background-image: radial-gradient(ellipse at 50% 60%, #333 1.2em, transparent 1.2em),
      radial-gradient(ellipse at 50% 80%, #333 0.6em, transparent 0.6em);
    box-shadow: inset 1em -1em 0#eee;
  }

  .panda::before {
    width: 7em;
    height: 4em;
    content: '';
    position: absolute;
    background-color: #333;
    top: 5.5em;
    left: 2.9em;
    border-radius: 50% 50% 42% 42%;
    transform: rotate(314deg);
    background-image: radial-gradient(circle at 5.1em 2em, white 0.3em, transparent 0.3em), radial-gradient(circle at 4.6em 2em, #333 0.7em, transparent 0.7em),
      radial-gradient(circle at 4.5em 2em, white 1em, transparent 1em);
    box-shadow: -1em -7.2em 0 -0.4em #333;
  }

  .panda::after {
    width: 7em;
    height: 4em;
    content: '';
    position: absolute;
    background-color: #333;
    top: 5.5em;
    left: 11.5em;
    border-radius: 50% 50% 42% 42%;
    transform: rotate(45deg);
    background-image: radial-gradient(circle at 1.6em 2em, white 0.3em, transparent 0.3em), radial-gradient(circle at 2.1em 2em, #333 0.7em, transparent 0.7em),
      radial-gradient(circle at 2.2em 2em, white 1em, transparent 1em);
    box-shadow: 0.8em -6.8em 0 -0.4em #333;
  }
</style>