So legen Sie die Farbe der CSS-Bildlaufleiste fest

Methode: Verwenden Sie zuerst den Pseudoklassenselektor „::-webkit-scrollbar-thumb“, um den Schieberegler für die Bildlaufleiste auszuwählen, und legen Sie dann die Farbe der Bildlaufleiste über das Hintergrundattribut fest. Das Syntaxformat lautet „::-webkit-“. scrollbar-thumb{background:color value;}".

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

Da heutzutage in den meisten Projekten Bildlaufleisten verwendet werden und manchmal auch simulierte Bildlaufleisten verwendet werden, sprechen wir nun über das CSS von Bildlaufleisten.

Zum Beispiel sieht die Bildlaufleiste des NetEase-Postfachs sehr gut aus, sie wird mit CSS eingestellt und es handelt sich um einen Webkit-Browser. Wie im Bild gezeigt:

Im Folgenden wird erläutert, wie diese Attribute verwendet werden und was sie bedeuten.

Das CSS unter Webkit legt die Eigenschaften der Bildlaufleiste fest

Es gibt hauptsächlich die folgenden 7 Eigenschaften

1, ::-webkit-scrollbar Der Gesamtteil der Bildlaufleiste, Sie können die Breite, Farbe, usw.

3, ::- webkit-scrollbar-button Schaltflächen an beiden Enden der Bildlaufleiste

4, ::-webkit-scrollbar-track Äußere Spur

5, ::-webkit-scrollbar-track-piece Innere Scroll-Groove

6, ::- webkit-scrollbar-thumb scrolling slider

7, ::-webkit-scrollbar-corner Ecke

8, ::-webkit-resizer Definieren Sie den Stil des Drag-Blocks unten rechte Ecke

wie im Bild gezeigt:

Beispiel:

/*滚动条样式*/
.cal_bottom::-webkit-scrollbar {/*滚动条整体样式*/
        width:4px;/*高宽分别对应横竖滚动条的尺寸*/
        height:4px;
}
.cal_bottom::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
        border-radius:5px;
        -webkit-box-shadow: inset005pxrgba(0,0,0,0.2);
        background:rgba(0,0,0,0.2);  /*设置滚动条颜色*/
}
.cal_bottom::-webkit-scrollbar-track {/*滚动条里面轨道*/
        -webkit-box-shadow: inset005pxrgba(0,0,0,0.2);
        border-radius:0;
        background:rgba(0,0,0,0.1);
}

(Lernvideo-Sharing: CSS-Video-Tutorial)

Das obige ist der detaillierte Inhalt vonSo legen Sie die Farbe der CSS-Bildlaufleiste fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!