Uncommonly used but interesting styles in CSS

1. Custom scroll bar

::-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);
}

2. Filter (valid for the entire page)

1. grayscale gray scale

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

2. sepia brown

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

3. saturation

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

4. hue-rotate hue rotation

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

5. invert reverse color

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

6. opacity transparency

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

7. brightness 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 shadow

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

3. Text

1. selection text selected

This property is used to change the style of text in the selected state, such as

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