简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Maison > interface Web > tutoriel CSS > le corps du texte

Exemple de partage de cas de barre de défilement personnalisée CSS scrollbar-face-color

黄舟
Libérer： 2017-07-03 10:59:38
original
1532 Les gens l'ont consulté

Barre de défilement personnalisée CSS-scrollbar-face-color

En raison des besoins du site Web ou de la beauté de la page, vous pouvez utiliser la barre de défilement personnalisée pour la définir. L'image ci-dessous est celle actuelle. effet de rendu du code source.

Effet code source : 

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>scrollbar-face-color_CSS----hongyy</title>
<style>
p{
	overflow:scroll;
	width:500px;
	height:200px;
	margin-top:20px;
}
/*// 一、必须增加，设置滚动条样式*/
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

/*// 二、置底的滑动槽，可以选择不写，默认*/
::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: #ccc;
}

/*//三、滚动条滑块和第一条必须书写，不写的话，无法实现*/
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: pink;
}

</style>
</head>
<body>
<p class="test">自定义滚动条3D表面的(threedface)的外观颜色。
你将在IE浏览器下看到滚动条的3D表面的(threedface)自定义滚动条3D表面的(threedface)的外观颜色。
你将在IE浏览器下看到滚动条的3D表面的(threedface)自定义滚动条3D表面的(threedface)的外观颜色。
你将在IE浏览器下看到滚动条的3D表面的(threedface)自定义滚动条3D表面的(threedface)的外观颜色。
你将在IE浏览器下看到滚动条的3D表面的(threedface)自定义滚动条3D表面的(threedface)的外观颜色。
你将在IE浏览器下看到滚动条的3D表面的(threedface)自定义滚动条3D表面的(threedface)的外观颜色。
你将在IE浏览器下看到滚动条的3D表面的(threedface)自定义滚动条3D表面的(threedface)的外观颜色。
你将在IE浏览器下看到滚动条的3D表面的(threedface)自定义滚动条3D表面的(threedface)的外观颜色。
你将在IE浏览器下看到滚动条的3D表面的(threedface)自定义滚动条3D表面的(threedface)的外观颜色。
你将在IE浏览器下看到滚动条的3D表面的(threedface)自定义滚动条3D表面的(threedface)的外观颜色。
你将在IE浏览器下看到滚动条的3D表面的(threedface)自定义滚动条3D表面的(threedface)的外观颜色。
你将在IE浏览器下看到滚动条的3D表面的(threedface)自定义滚动条3D表面的(threedface)的外观颜色。
你将在IE浏览器下看到滚动条的3D表面的(threedface)自定义滚动条3D表面的(threedface)的外观颜色。
你将在IE浏览器下看到滚动条的3D表面的(threedface)</p>
</body>
</html>
Copier après la connexion

ps : Vous pouvez le copier directement ^_^


Ci-joint le style de la barre de défilement sous IE :

IE :
scrollbar-arrow-color : rgba(0,0,0,0.3); /*Couleur de la flèche triangulaire*/
scrollbar-face-color : rgba( 0 ,0,0,0.5); /*La couleur de la barre de défilement tridimensionnelle (y compris la couleur d'arrière-plan de la partie flèche)*/
scrollbar-3dlight-color : rgba(0,0,0,0.3) ); /*La barre de défilement tridimensionnelle Couleur du bord lumineux*/
scrollbar-highlight-color: rgba(0,0,0,0.5); /*Couleur de surbrillance de la barre de défilement (ombre gauche ?) */
scrollbar-shadow-color: rgba(0,0,0,0.3); /*La couleur de l'ombre de la barre de défilement tridimensionnelle*/
scrollbar-darkshadow-color: rgba(0 ,0,0,0.3); /*La couleur de l'ombre extérieure de la barre de défilement tridimensionnelle */
scrollbar-track-color: rgba(0,0,0,0.5); couleur d'arrière-plan de la barre de défilement*/
scrollbar-base-color:rgba(0,0,0,0.5) /*Couleur de base de la barre de défilement*/
scrollbar-base-color:#666; */
scrollbar-arrow-color: #fff; /*Couleur de la flèche triangulaire*/
scrollbar-face-color: #666; /*La couleur de la barre de défilement tridimensionnelle (y compris la couleur d'arrière-plan de la partie flèche)*/
scrollbar-3dlight-color : #666 /*La couleur du bord lumineux de la barre de défilement tridimensionnelle */
scrollbar-highlight-color : #666 ; couleur de surbrillance de la barre de défilement (ombre de gauche ?)*/
scrollbar-shadow-color : #666 ; /*La couleur de l'ombre de la barre de défilement tridimensionnelle* /
scrollbar-darkshadow-color : #666 ; /*La couleur de l'ombre extérieure de la barre de défilement tridimensionnelle*/
scrollbar-track-color: #666; /*La couleur d'arrière-plan de la barre de défilement tridimensionnelle*/
scrollbar- base -color:#666; /*La couleur de base de la barre de défilement*/

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!

Étiquettes associées：
自定义
source：php.cn
Article précédent：scrollbar-face-color en CSS n'est pas une propriété CSS connue Article suivant：css : utilisation et définition de la couleur de la flèche de la barre de défilement
Déclaration de ce site Web
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
Derniers articles par auteur
Derniers numéros
function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...
Depuis 2024-04-29 11:01:01
0
2
1815
Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?
Depuis 2024-04-23 00:22:19
0
10
1968
La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...
Depuis 2024-04-19 15:37:47
0
1
1665
Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...
Depuis 2024-04-18 23:52:34
0
1
1568
Où sont les didacticiels sur la cartographie mentale CSS ? Didacticiel
Depuis 2024-04-16 10:10:18
0
0
1593
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！