自定义滚动条样式及标题渐变样式

流氓也是种气质 _Cookie

已于 2022-06-21 10:32:40 修改

阅读量188

点赞数

分类专栏： css 文章标签： css3 css 前端

于 2022-03-02 15:16:57 首次发布

本文链接：https://blog.csdn.net/qq_37550440/article/details/123231255

版权

css 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

一.自定义滚动条样式

/**设置滚动条的样式**/
  ::-webkit-scrollbar {
      width: 5px;
  }

  /**滚动槽**/
  ::-webkit-scrollbar-track {
      box-shadow: inset 0 0 6px #d1cfcf;
      border-radius: 10px;
  }

  /**滚动条滑块**/
  ::-webkit-scrollbar-thumb {
      border-radius: 12px;
      background: #f7f7f7;
      -webkit-box-shadow: inset 0 0 6px #d1cfcf;
  }

  ::-webkit-scrollbar-thumb:window-inactive {
      background: rgba(245, 245, 245, 0.4);
  }

效果图：

二.标题渐变样式

标题渐变颜色： 上#ffffff   下#639EFF
标题渐变样式：
background-image: -webkit-linear-gradient(bottom,#639EFF,#ffffff),
// background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#f5f8f8), to(#4d84ce));
-webkit-background-clip: text,
-webkit-text-fill-color: transparent

效果图：