Beispielcode für CSS3 zum Erzielen eines Bildlaufleisten-Verschönerungseffekts

Der spezifische Code lautet wie folgt:

/*Breite der Bildlaufleiste*/

    ::-webkit-scrollbar {
        Breite: 9px;
        Höhe: 9px;
    }

/* Äußere Spur. Sie können display:none verwenden, um es auszublenden, oder ein Hintergrundbild hinzufügen, um die Farbe der Anzeige zu ändern*/

    ::-webkit-scrollbar-track {
        Breite: 6px;
        Hintergrundfarbe: #0d1b20;
        -Webkit-Randradius: 2em;
        -moz-Randradius: 2em;
        Rahmenradius: 2em;
    }

/*Bildlaufleisteneinstellungen*/

    ::-webkit-scrollbar-thumb {
        Hintergrundfarbe: #606d71;
        Hintergrundclip: Polsterbox;
        Mindesthöhe: 28px;
        -Webkit-Randradius: 2em;
        -moz-Randradius: 2em;
        Rahmenradius: 2em;
    }
/*Hintergrund, wohin die Bildlaufleiste verschoben wird*/

    ::-webkit-scrollbar-thumb:hover {
         Hintergrundfarbe: #fff;
    }

CSS

::-webkit-scrollbar { }
::-webkit-scrollbar-button { }
::-webkit-scrollbar-track { }
::-webkit-scrollbar-track-piece { }
::-webkit-scrollbar-thumb { }
::-webkit-scrollbar-corner { }
::-webkit-resizer { }

Das durch den obigen CSS-Code geregelte Flächenverhältnis lautet:

::-webkit-scrollbar Die gesamte Bildlaufleiste, ihre Attribute umfassen Breite, Höhe, Hintergrund, Rahmen (genau wie bei einem Element auf Blockebene) usw.
::-webkit-scrollbar-button Schaltflächen an beiden Enden der Bildlaufleiste. Sie können display:none verwenden, um es auszublenden, oder ein Hintergrundbild oder eine Hintergrundbildfarbe hinzufügen, um den Anzeigeeffekt zu ändern.
::-webkit-scrollbar-track Äußere Spur. Sie können display:none verwenden, um es auszublenden, oder ein Hintergrundbild oder eine Hintergrundbildfarbe hinzufügen, um den Anzeigeeffekt zu ändern.
::-webkit-scrollbar-track-piece Innere Spur, der mittlere Teil der Bildlaufleiste (entfernt).
::-webkit-scrollbar-thumb Der verschiebbare Teil der Bildlaufleiste
::-Webkit-Scrollbar-Ecke Ecke
::-webkit-resizer definiert den Stil des Drag-Blocks in der unteren rechten Ecke

Dies ist das Ende dieses Artikels über den Beispielcode zur Verwendung von CSS3 zum Erzielen eines Verschönerungseffekts der Bildlaufleiste. Weitere relevante Inhalte zur Verschönerung der Bildlaufleiste mit CSS3 finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!