CSS滾動條優化設計之滾動條顏色設計詳細教程

我們知道用overflow可以節制顯示滾動條，這里我就來具體介紹優化滾動條，可以來設置滾動條各個屬性的顏色來設置優化滾動條。具體的具體的教程如下，用現實代碼和執行結果來申明問題，但愿能幫到列位。

東西/原料

CSS根本常識
HTML常識

方式/步調

1
我們起首來看看默認的滾動條的樣式，具體代碼如下：
<html>
<head>
<title>滾動條美化</title>
<style>
.div1{
background-color:red;
height:200px;
width:200px;
overflow:scroll;
}
</style>
</head>
<body>
<div class="div1">
</div>
</body>
</html>
設置200px的正方形的紅色布景的矩形框，并給這個框添加滾動條，可以看到默認的滾動條的結果。
2
設置滾動條的亮邊框為綠色，具體代碼如下：
<html>
<head>
<title>滾動條美化</title>
<style>
.div1{
background-color:red;
height:200px;
width:200px;
overflow:scroll;
scrollbar-3dlight-color:green;

}
</style>
</head>
<body>
<div class="div1">
</div>
</body>
</html>
可以看到如下圖的執行結果。
3
設置滾動條3D界面亮邊為綠色，具體代碼如下：
<html>
<head>
<title>滾動條美化</title>
<style>
.div1{
background-color:red;
height:200px;
width:200px;
overflow:scroll;
scrollbar-highlight-color:green;

}
</style>
</head>
<body>
<div class="div1">

</div>
</body>
</html>
可以看到，滾動條的綠色部門
4
設置滾動條的箭頭的顏色為綠色，具體的代碼如下：
<html>
<head>
<title>滾動條美化</title>
<style>
.div1{
background-color:red;
height:200px;
width:200px;
overflow:scroll;
scrollbar-arrow-color:green;

}
</style>
</head>
<body>
<div class="div1">

</div>
</body>
</html>
如下圖所示的執行成果，可看出滾動條的箭頭釀成了綠色了。
5
設置滾動條的基準顏色為綠色，具體代碼如下：
<html>
<head>
<title>滾動條美化</title>
<style>
.div1{
background-color:red;
height:200px;
width:200px;
overflow:scroll;
scrollbar-base-color:green;

}
</style>
</head>
<body>
<div class="div1">

</div>
</body>
</html>
如下圖，是不是可以發現滾動條的基準顏色釀成了綠色了。
6
設置滾動條的3D暗邊為黃色，具體代碼如下
<html>
<head>
<title>滾動條美化</title>
<style>
.div1{
background-color:red;
height:200px;
width:200px;
overflow:scroll;
scrollbar-base-color:green;
scrollbar-shadow-color:yellow;
}
</style>
</head>
<body>
<div class="div1">

</div>
</body>
</html>
可以看到如下圖的執行結果