CSS中不常用但是很有意思的样式

一、自定义滚动条

::-webkit-scrollbar {
    
    
    width: 5px;
}

/*定义滚动条轨道*/
body::-webkit-scrollbar-track {
    
    
    background-color: rgba(0, 0, 0, .7);
}

/*定义滑块*/
body::-webkit-scrollbar-thumb {
    
    
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
    background-color: rgba(200,200,200,.8);
}

二、Filter（对整个页面都有效）

1. grayscale灰度

html{
    
    
    filter: grayscale(1); /* 0-1或0-100% */
}

2. sepia褐色

html{
    
    
    filter: sepia(1); /* 0-1或0-100% */
}

3. saturate饱和度

html{
    
    
    filter: saturate(1); /* 0-1或0-100% */
}

4. hue-rotate色相旋转

html{
    
    
    filter: hue-rotate(90deg); /* 角度，单位：deg */
}

5. invert反色

html{
    
    
    filter: invert(1); /* 0-1或0-100% */
}

6. opacity透明度

html{
    
    
    filter: opacity(1); /* 0-1或0-100% */
}

7. brightness亮度

html{
    
    
    filter: brightness(1); /* 0-1或0-100% */
}

8. contrast对比度

html{
    
    
    filter: contrast(1); /* 0-1或0-100% */
}

9. blur模糊

html{
    
    
    filter: blur(1px); /* 像素，单位：px */
}

10. drop-shadow阴影

html{
    
    
    drop-shadow(5px 5px 5px #ccc); /* box-shadow参数 */
}

三、文本

1. selection文本选中

该属性用来改变文本在选中状态的样式，如

p::selection{
    
    
    background-color: #5599aa;
    color: #FFFFFF;
}