Maison > Article > interface Web > Explication détaillée de la définition de la couleur de la barre de défilement de l'exemple de barre de défilement CSS

Explication détaillée de la définition de la couleur de la barre de défilement de l'exemple de barre de défilement CSS

黄舟original: 2017-07-03 11:23:502413parcourir

Exemple CSS positif --- réglage de la couleur de la barre de défilement de la barre de défilement

<body style="scrollbar-arrow-color:yellow;scrollbar-base-color:lightsalmon">
*********************
<STYLE>{
SCROLLBAR-FACE-COLOR:#3399cc; 
SCROLLBAR-HIGHLIGHT-COLOR: white; 
SCROLLBAR-SHADOW-COLOR: white; 
SCROLLBAR-ARROW-COLOR: #ffffff; 
SCROLLBAR-BASE-COLOR:#dff0c0}
</STYLE>

Parmi eux SCROLLBAR-FACE-COLOR, SCROLLBAR-HIGHLIGHT-COLOR, SCROLLBAR-SHADOW-COLOR, SCROLLBAR-ARROW- COLOR , SCROLLBAR-BASE-COLOR, SCROLLBAR-DARKSHADOW-COLOR sont utilisés pour spécifier les couleurs des différentes parties de la barre de défilement (vous saurez quelles parties de la barre de défilement elles représentent en fonction de leur signification).
Ajoutez simplement ces lignes de code entre le code HTML de la page ! ! ! !
:)

*************************** *** *******************

La barre de défilement est la barre verticale (horizontale) sur le côté droit (en bas ) de la page Web. La couleur de la barre de défilement peut être modifiée en écrivant une feuille de style CSS.
Cette page utilise des barres de défilement vertes.

Feuille de style CSS de la barre de défilement :

 <style>
BODY {
   scrollbar-face-color: #008000;
   scrollbar-highlight-color: #0B0E2F;
   scrollbar-3dlight-color: #0B0E2F;
   scrollbar-darkshadow-color: #0B0E2F;
   scrollbar-shadow-color: #003366;
   scrollbar-arrow-color: #003366;
   scrollbar-track-color: #FFFFFF;}
</style>

La fonction de la feuille de style CSS est de control Le style de police, le style de couleur et le style de souris du site Web

sont sous la forme commençant par c9ccee2e6ea535a969eb3f532ad9fe89 et se terminant par 531ac245ce3e4fe3d50054a55f265927.

Le code vert
scrollbar-face-color : #008000;--La couleur de la barre de défilement
scrollbar-highlight-color : #0B0E2F;--La couleur de la barre de défilement en surbrillance
scrollbar-3dlight-color: #0B0E2F;--La couleur de la barre de défilement 3D
scrollbar-darkshadow-color: #0B0E2F;--La couleur de l'ombre sombre de la barre de défilement
scrollbar-shadow-color: #003366;--La couleur de l'ombre de la barre de défilement
scrollbar-arrow-color: #003366;--La couleur de la flèche de la barre de défilement
scrollbar-track-color : #FFFFFF;} --La couleur de l'arrière-plan de la barre de défilement

????
????
" #008000" est les trois codes de couleurs primaires qui peuvent être ajustés et remplacés par différentes couleurs à volonté.

************************************** **** *******************************

<STYLE>  
BODY  {  
SCROLLBAR-FACE-COLOR:  #fc0000;  
 SCROLLBAR-HIGHLIGHT-COLOR:  #fc0000;  
 SCROLLBAR-SHADOW-COLOR:  #fc0000;  
 SCROLLBAR-3DLIGHT-COLOR:  #fc0000;  
 SCROLLBAR-ARROW-COLOR:  #fcfc00;  
 SCROLLBAR-TRACK-COLOR:  #fc4800;  
 SCROLLBAR-DARKSHADOW-COLOR:  #fc0000;  
 SCROLLBAR-BASE-COLOR:  #fc0000  
}  
</STYLE>

********************************* *********** *******************************

body {
font-size:9pt;
color:#000099; cursor:url(meng.cur);
OVERFLOW-X
: auto; OVERFLOW: scroll;
SCROLLBAR-FACE-COLOR: #817af3;
SCROLLBAR-HIGHLIGHT-COLOR: #817af3;
SCROLLBAR-SHADOW-COLOR: #000000;
SCROLLBAR-3DLIGHT-COLOR: #817af3;
SCROLLBAR-ARROW-COLOR: #e8f7e6;
SCROLLBAR-TRACK-COLOR: 817af3
SCROLLBAR-DARKSHADOW-COLOR: #e8f7e6;
}

332 paramètres de couleur de la barre de défilement en écran partagé

Supprimer tous les autres codes à barres de défilement et ajoutez uniquement le code suivant. Chaque couleur correspondante est expliquée.

 set
Time
out(function setScrollbar(){      //color=Array
(面部颜色,上左斜面,下右斜面,上左边沿,箭头,底版色,下右边沿)      
color=Array("#EDE6DA","#EDE6DA","#EDE6DA","#EDE6DA","#84674A","#EDE6DA","#EDE6DA");      
box=Array("u","u1","d","r")
      for (var i=0;i<box.length;i++){            
eval("parent."+box[i]+".
document
.body.style.scrollbarFaceColor=color[0]");            
eval("parent."+box[i]+".document.body.style.scrollbarHighlightColor=color[1]");            
eval("parent."+box[i]+".document.body.style.scrollbarShadowColor=color[2]");
            eval("parent."+box[i]+".document.body.style.scrollbar3dLightColor=color[3]");            
eval("parent."+box[i]+".document.body.style.scrollbarArrowColor=color[4]");            
eval("parent."+box[i]+".document.body.style.scrollbarTrackColor=color[5]");
            eval("parent."+box[i]+".document.body.style.scrollbarDarkShadowColor=color[6]");      
};
setTimeout("setScrollbar()",300); 
},300);

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Concernant la compatibilité de la barre de défilement DIV avec Firefox, veuillez demander le module js scrollbar-dark-shadow-color:#eee;Article suivant：Concernant la compatibilité de la barre de défilement DIV avec Firefox, veuillez demander le module js scrollbar-dark-shadow-color:#eee;

Articles Liés

Voir plus