CSS自定義滾動條scrollbar-face-color的實例案例分享

來源：懂視網責編：小采時間：2020-11-27 18:50:42

CSS自定義滾動條scrollbar-face-color的實例案例分享

CSS自定義滾動條scrollbar-face-color的實例案例分享:CSS-scrollbar-face-color自定義滾動條因網站需求，或者是頁面的美觀等特定需求下可以使用自定義滾動條的方式進行設置，下圖是當前源碼渲染的效果。源碼效果：<!DOCTYPE html> <html lang="zh-cn"> <h

推薦度：

點擊下載本文 文檔為doc格式

導讀CSS自定義滾動條scrollbar-face-color的實例案例分享:CSS-scrollbar-face-color自定義滾動條因網站需求，或者是頁面的美觀等特定需求下可以使用自定義滾動條的方式進行設置，下圖是當前源碼渲染的效果。源碼效果：<!DOCTYPE html> <html lang="zh-cn"> <h

CSS-scrollbar-face-color自定義滾動條

因網站需求，或者是頁面的美觀等特定需求下可以使用自定義滾動條的方式進行設置，下圖是當前源碼渲染的效果。

源碼效果：

<!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>