CSS-scrollbar-face-color benutzerdefinierte Bildlaufleiste
Aufgrund von Website-Anforderungen oder spezifischen Anforderungen wie der Schönheit der Seite können Sie benutzerdefinierte Bildlaufleisten verwenden, um diese festzulegen. Das Bild unten zeigt die aktuelle Quellcode-Wiedergabe . Wirkung.
Quellcode-Effekt:
<!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>
Nach dem Login kopieren
ps: Sie können es direkt kopieren ^_^
Angehängt ist der Bildlaufleistenstil unter IE:
IE:
scrollbar-arrow-color: rgba(0,0,0,0.3); /*Color of triangular Arrow*/
scrollbar-face-color: rgba( 0 ,0,0,0.5); /*Die Farbe der dreidimensionalen Bildlaufleiste (einschließlich der Hintergrundfarbe des Pfeilteils)*/
scrollbar-3dlight-color: rgba(0,0,0,0.3 ); /*Die dreidimensionale Bildlaufleistenfarbe der hellen Kante*/
scrollbar-highlight-color: rgba(0,0,0,0.5); /*Hervorhebungsfarbe der Bildlaufleiste (linker Schatten?) */
scrollbar-shadow-color: rgba(0,0,0,0.3); /*Die Farbe des Schattens der dreidimensionalen Bildlaufleiste*/
scrollbar-darkshadow-color: rgba(0 ,0,0,0.3); /*Die Farbe des äußeren Schattens der dreidimensionalen Bildlaufleiste */
scrollbar-track-color: rgba(0,0,0,0.5); /*Dreidimensional Hintergrundfarbe der Bildlaufleiste*/
Grundfarbe der Bildlaufleiste:rgba(0,0,0,0.5) ; /*Grundfarbe der Bildlaufleiste*/
Grundfarbe der Bildlaufleiste:#666; /*Grundfarbe der Bildlaufleiste */
scrollbar-arrow-color: #fff; /*Dreieckige Pfeilfarbe*/
scrollbar-face-color: #666; /*Die Farbe der dreidimensionalen Bildlaufleiste (einschließlich der Hintergrundfarbe von der Pfeilteil)*/
scrollbar-3dlight-color: #666; /*Die Farbe des hellen Randes der dreidimensionalen Bildlaufleiste */
scrollbar-highlight-color: #666; /*Die Hervorhebungsfarbe der Bildlaufleiste (linker Schatten?)*/
scrollbar-shadow-color: #666; /*Die Farbe des dreidimensionalen Bildlaufleistenschattens* /
scrollbar-darkshadow-color: #666 ; /*Die Farbe des äußeren Schattens der dreidimensionalen Bildlaufleiste*/
scrollbar-track-color: #666; /*Die Hintergrundfarbe der dreidimensionalen Bildlaufleiste*/
scrollbar-base -color:#666; /*Die Grundfarbe der Bildlaufleiste*/
Das obige ist der detaillierte Inhalt vonBeispiel für die gemeinsame Nutzung einer benutzerdefinierten CSS-Bildlaufleiste scrollbar-face-color. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!