.card {
    /* flex布局下元素不按比例缩放 */
    flex-shrink: 0;
    flex-grow: 0;
    position: relative;
    /* width: 300px;
    height: 450px; */
    overflow: hidden;
    margin: auto;
    /* background-color: var(--border-color); */
    background-color: white;
    border-radius: 20px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    /* flex 子元素 纵向排列 */
    flex-direction: column;
    /* 增加个阴影 */
    /* box-shadow: 0 0 10px #2c2c2c; */
    box-shadow: 0 0 2px 0 rgba(0, 0, 0, .15), 0 0 4px 0 rgba(0, 0, 0, .2), 0 12px 12px 0 rgba(0, 0, 0, .15);
    /* 同意给字体价格颜色 */
    color: var(--font_color)


}

.card:hover {
    box-shadow: 0 0 18px 0 rgba(0, 0, 0, .1), 0 0 36px 0 rgba(0, 0, 0, .15), 0 36px 36px 0 rgba(0, 0, 0, .2);
}