console 命令行工具 X clear

console

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Antd card photo</title>
  </head>
  <body>
    <div class="container">
      <div class="card card-bordered card-hoverable">
        <div class="card-cover">
          <img
            alt="example"
            width="240"
            height="300"
            src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png"
          />
        </div>
        <div class="card-body">
          <div class="card-meta-title">
            Europe Street beat
          </div>
          <div class="card-meta-desc">
            www.instagram.com
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

.container {
    padding: 42px 24px 50px;
    color: rgba(0, 0, 0, 0.85);
    border-bottom: 1px solid #f0f0f0;
}

.card {
    width: 240px;
    margin: 0 auto;
    background-color: #fff;
    color: rgba(0, 0, 0, 0.65);
    font-size: 14px;
    border-radius: 2px;
    line-height: 1.5;
}

.card-bordered {
    border: 1px solid #f0f0f0;
}

.card-hoverable {
    cursor: pointer;
    transition-property: box-shadow, border-color, --webkit-box-shadow;
    transition-duration: 0.3s;
}

.card-hoverable:hover {
    border-color: transparent;
    box-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09);
}

.card-body {
    padding: 24px;
}

.card-meta-title {
    color: rgba(0, 0, 0, 0.85);
    font-weight: bold;
    font-size: 16px;
}

.card-meta-desc {
    color: rgba(0, 0, 0, 0.45);
}