Heim > Artikel > Web-Frontend > Beispiel für die gemeinsame Nutzung einer benutzerdefinierten CSS-Bildlaufleiste scrollbar-face-color

Beispiel für die gemeinsame Nutzung einer benutzerdefinierten CSS-Bildlaufleiste scrollbar-face-color

黄舟Original: 2017-07-03 10:59:381488Durchsuche

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>

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：scrollbar-face-color in CSS ist keine bekannte CSS-EigenschaftNächster Artikel：scrollbar-face-color in CSS ist keine bekannte CSS-Eigenschaft

In Verbindung stehende Artikel

Mehr sehen