我们知道用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>
可以看到如下图的执行结果
注重事项
- HTML的优异页面是经由过程本身设计实现的
- 编写HTML多测验考试分歧的体例来联系编写
