# 论坛扩展css加了个帖子列表：自定义可爱封边

非常可爱的拓展，我为拓展增加了能自动跟随系统设置的深色模式

/* ============================================================
   1. 组件基础样式：统一图标与按钮风格
   ============================================================ */
.avatar { border: 3px solid #fff !important; } /* 给头像增加一圈白色边框，更醒目 */
.avatar + .icon { display: none !important; } /* 隐藏掉头像旁边的小等级图标，让画面更简洁 */
.avatar-normal, .sorter, .btn { box-shadow: 1px 1px 3px #000 !important; } /* 给头像、排序栏、按钮加上淡淡的黑色投影，看起来有立体感 */
.avatar-normal { border-radius: 20px; } /* 设置头像为圆角矩形 */

/* ============================================================
   2. 滚动条美化：让滚动条不再是原生那种丑丑的样子
   ============================================================ */
::-webkit-scrollbar { width: 8px; height: 8px; } /* 设置滚动条的厚度 */
::-webkit-scrollbar-track { background-color: rgba(200, 200, 200, 0.2); border-radius: 2em; } /* 设置滚动条轨道的颜色为浅灰半透明，并带圆角 */
::-webkit-scrollbar-thumb {
    background-color: #ccc; /* 设置滑块本身的颜色 */
    background-image: -webkit-linear-gradient(45deg, rgba(255,255,255,0.4) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0.4) 75%, transparent 75%, transparent); /* 给滑块加上漂亮的斜纹装饰 */
    border-radius: 2em; /* 滑块两端变圆润 */
}

/* ============================================================
   3. 自定义鼠标指针：让点击交互更有趣
   ============================================================ */
body { cursor: url('https://npm.elemecdn.com/kang-static/Hexo/img/default.cur'), auto !important; } /* 设置页面空白处的默认鼠标箭头 */
a, button, img, .transition { cursor: url('https://npm.elemecdn.com/kang-static/Hexo/img/pointer.cur'), auto !important; } /* 设置鼠标移到链接、按钮、图片等可点击物体上的指针 */

/* ============================================================
   4. 页面背景与透明度布局：核心视觉美化
   ============================================================ */
body::before {
    content: "";
    position: fixed; /* 把背景图固定住，页面滚动时背景不动 */
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: -1; /* 把背景图放到最底层，确保不遮挡文字 */
    background: #f0f0f0 url(https://api.yppp.net/api.php) center/cover no-repeat; /* 设置自动拉伸的随机背景图 */
}

#nsk-body, header { background-color: rgba(255, 255, 255, 0.7) !important; } /* 设置主体内容区和顶栏为 70% 透明的白色，隐约透出背景 */
footer { background-color: rgba(255, 255, 255, 0.15) !important; } /* 页脚更透一点，只有 15% 透明度 */

/* ============================================================
   5. 帖子列表：自定义可爱封边 (带调试指南)
   ============================================================ */
#nsk-body-left {
    background: rgba(255, 255, 255, 0.2) !important; /* 背景更通透 (0.2透明度) */
    backdrop-filter: blur(10px); /* 开启磨砂玻璃模糊效果 */
    border-radius: 20px; /* 设置帖子区域的大圆角 */
    
    /* 1. 图案厚度：数值越大，边框图案越宽 (觉得太窄就改大这里) */
    border: 25px solid transparent; 
    
    /* 2. 图片设置：55为切片数值，若图案被切断，微调此数字 (每次增减 5-10) */
    border-image: url('https://cdn.nodeimage.com/i/wXSGm50JBUZj8j3wobqzgleqht7Fa2uq.png') 55 round;
    
    /* 3. 偏移距离：图案离帖子内容的距离 (如果图案压到字了，就把 10 改大) */
    border-image-outset: 10px;
    
    /* 设置内容与边缘的空隙 */
    padding: 10px;
    margin-right: 15px;
}

/* ============================================================
   6. 新增：深色模式自动适配（当系统开启深色模式时自动生效）
   ============================================================ */
@media (prefers-color-scheme: dark) {
    /* 6.1 背景图劣化与回退色调整 */
    body::before {
        background-color: #121212 !important; /* 纯黑底色回退 */
        filter: brightness(0.5) contrast(1.1); /* 把随机背景图亮度调低 50%，防止夜间刺眼 */
    }

    /* 6.2 头像边框微调（暗色下纯白边框可能太扎眼，改成高级深灰） */
    .avatar { border-color: #2d2d2d !important; }

    /* 6.3 滚动条深色模式适配 */
    ::-webkit-scrollbar-track { background-color: rgba(30, 30, 30, 0.5); }
    ::-webkit-scrollbar-thumb {
        background-color: #555;
        background-image: -webkit-linear-gradient(45deg, rgba(0,0,0,0.3) 25%, transparent 25%, transparent 50%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.3) 75%, transparent 75%, transparent);
    }

    /* 6.4 核心面板切换为深色半透明（黑色磨砂玻璃） */
    #nsk-body, header { 
        background-color: rgba(20, 20, 20, 0.75) !important; 
    }
    footer { 
        background-color: rgba(0, 0, 0, 0.5) !important; 
    }

    /* 6.5 帖子列表区域深色适配 */
    #nsk-body-left {
        background: rgba(15, 15, 15, 0.4) !important; /* 调低卡片背景亮度 */
    }
}

80hou楼主

128days ago

#21

@JohnLeo #17