自定义滚动条样式css

最新推荐文章于 2025-05-16 16:56:09 发布

原创最新推荐文章于 2025-05-16 16:56:09 发布 · 214 阅读

1 ·

CC 4.0 BY-SA版权

这篇博客分享了一种自定义CSS样式的方法，用于美化网页滚动条。通过设置`.film-box-swiper`类的选择器，详细定义了滚动条的宽度、颜色、边框圆角以及滚动条各部分的样式，使得滚动条在网页中呈现出独特的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图：（突然觉得这个挺好看的，就记一下，hhh）

  /*滚动条样式*/
  .film-box-swiper::-webkit-scrollbar {/*滚动条整体样式*/
    width: 10px;     /*高宽分别对应横竖滚动条的尺寸*/
    height: 4px;
    /*滚动条滑块按钮的颜色*/
    scrollbar-face-color: rgba(196,170,128,0.8);
    /*滚动条整体颜色*/
    scrollbar-highlight-color: rgba(196,170,128,0.8);
    /*滚动条轨道颜色*/
    scrollbar-track-color: rgba(196,170,128,0.1);
  }
  .film-box-swiper::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 5px rgba(196,170,128,0.8);
    background: rgba(196,170,128,0.8);
  }
  .film-box-swiper::-webkit-scrollbar-track {/*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px rgba(196,170,128,0.2);
    border-radius: 0;
    background: rgba(196,170,128,0.1);
  }