模板:IconSlot/styles.css

/* === 外框 + 内部下凹 === */
.mc-slot-inner {
    width: 60px;
    height: 60px;
    /* 内部灰色底板（符合你说的“里面是灰的”） */
    background-color: #8b8b8b; 
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;

    /* 外边框（浅白边框，立体凸起） */
    border-top: 3px solid #ffffff;
    border-left: 3px solid #ffffff;
    border-bottom: 3px solid #4a4a4a;
    border-right: 3px solid #4a4a4a;
}

/* === 内部下凹边框（让灰板陷进去的关键） === */
.mc-slot-inner::before {
    content: '';
    position: absolute;
    top: 3px; left: 3px; right: 3px; bottom: 3px;
    pointer-events: none; /* 防止挡住点击 */

    /* 陷进去的边框：左上改为暗色，右下改为亮色 */
    border-top: 2px solid #5a5a5a;
    border-left: 2px solid #5a5a5a;
    border-bottom: 2px solid #b0b0b0;
    border-right: 2px solid #b0b0b0;
}

/* === 内部固定图片 === */
.mc-slot-inner img {
    max-width: 40px;
    max-height: 40px;
    z-index: 1; /* 保证图片盖在内边框之上 */
    image-rendering: pixelated; /* 保持像素风清晰 */
    display: block;
}

/* 如果图片外面包了 a 标签 */
.mc-slot-inner a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
    z-index: 1;
}