个性化、美化、自定义网页滚动条

个性化、美化、自定义网页滚动条

效果图:

个性化、美化、自定义网页滚动条

直接上代码(直接在CSS里添加即可):

::-webkit-scrollbar {
  /*滚动条整体样式*/
  width : 10px;  /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
  }
::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius   : 10px;
  background-color: #00b5fb;
  background-image: -webkit-linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.2) 25%,
      transparent 25%,
      transparent 50%,
      rgba(255, 255, 255, 0.2) 50%,
      rgba(255, 255, 255, 0.2) 75%,
      transparent 75%,
      transparent
  );
  }
::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
  background   : #ededed;
  border-radius: 10px;
  }

个性化、美化、自定义网页滚动条

上一篇:PS制作虚化背景突出主体之荷花图片效果教程


下一篇:Redis实现持久化存储,面试分享自己成功的经历