CSS 合集

一、针对不同浏览器设置css改变滚动条样式

针对不同的浏览器，你可以使用特定的CSS伪元素来修改滚动条的样式。然而，不是所有的浏览器都支持自定义滚动条样式，且各浏览器的实现方式可能有所不同。以下是一些主流浏览器自定义滚动条样式的方法：

1、对于Webkit内核的浏览器（如Chrome和Safari）

你可以使用::-webkit-scrollbar系列伪元素来修改滚动条的样式。例如：

/* 滚动条整体部分 */  
::-webkit-scrollbar {  
    width: 10px;  // 修改滚动条宽度
}  
  
/* 外层轨道 */  
::-webkit-scrollbar-track {  
    background: #f1f1f1;  // 修改滚动条轨道的样式
}  
  
/* 滚动的滑块 */  
::-webkit-scrollbar-thumb {  
    background: #888;  // 修改滚动条手柄的样式 
}  
  
/* 当手柄在滚动时添加滚动条手柄的悬停效果 */  
::-webkit-scrollbar-thumb:hover {  
    background: #555;  
}

/* 其他 */
::-webkit-scrollbar-button 滚动条两端的按钮
::-webkit-scrollbar-track-piece 内层滚动槽
::-webkit-scrollbar-corner 边角
::-webkit-resizer 定义右下角拖动块的样式

2、对于Firefox

Firefox在版本64之前不支持自定义滚动条样式。从版本64开始，Firefox引入了对scrollbar-color和scrollbar-width属性的支持，允许你修改滚动条的颜色和宽度。例如：

/* 修改滚动条颜色和宽度 */  
scrollbar-color: red blue; /* 红色为滚动条颜色，蓝色为滚动条轨道颜色 */  
scrollbar-width: thin; /* 可选值：auto | thin | none */

/* 使用参考 */
/* 为整个页面设置滚动条颜色和宽度 */  
body {  
    /* 设置滚动条颜色为红色和蓝色（蓝色是轨道颜色） */  
    scrollbar-color: red blue;  
      
    /* 设置滚动条宽度为thin */  
    scrollbar-width: thin;  
  
    /* 为了看到滚动条效果，通常需要设置足够的内容高度 */  
    height: 200vh;  
    overflow-y: scroll; /* 或 auto，根据需要 */  
}

3、对于Internet Explorer和Edge（旧版，基于EdgeHTML）

Internet Explorer和旧版Edge浏览器基本不支持通过CSS自定义滚动条样式。在这些浏览器中，滚动条的样式由用户的系统设置决定。

如下几个属性还可以尝试使用：

scrollbar-arrow-color: color; /三角箭头的颜色/
scrollbar-face-color: color; /立体滚动条的颜色（包括箭头部分的背景色）/
scrollbar-3dlight-color: color; /立体滚动条亮边的颜色/
scrollbar-highlight-color: color; /滚动条的高亮颜色（左阴影？）/
scrollbar-shadow-color: color; /立体滚动条阴影的颜色/
scrollbar-darkshadow-color: color; /立体滚动条外阴影的颜色/
scrollbar-track-color: color; /立体滚动条背景颜色/
scrollbar-base-color:color; /滚动条的基色/