css中横竖滚动条

在网页设计中，滚动条是一个必不可少的元素，它可以使网页内容更加丰富和可扩展。CSS中的滚动条可以通过CSS样式来进行自定义。
1. 使用CSS样式来自定义水平滚动条
在CSS中，可以使用“::-webkit-scrollbar”伪元素来自定义滚动条。例如，下面的代码将为水平滚动条设置一些样式:

p{
  overflow-x: scroll;
}
p::-webkit-scrollbar{
  height: 10px;
}
p::-webkit-scrollbar-thumb{
  background-color: #ccc;
} 

通过设置“overflow-x: scroll”，可以使p元素拥有水平滚动条。然后，通过“::-webkit-scrollbar”样式来设置滚动条本身的样式。在这个例子中，我们将滚动条的高度设置为10像素。“::-webkit-scrollbar-thumb”样式用于设置滚动条上拇指的样式。
2. 使用CSS样式来自定义垂直滚动条
类似地，可以使用CSS样式来自定义垂直滚动条。例如，下面的代码将为垂直滚动条设置样式:

p{
  overflow-y: scroll;
}
p::-webkit-scrollbar{
  width: 10px;
}
p::-webkit-scrollbar-thumb{
  background-color: #ccc;
} 

通过设置“overflow-y: scroll”，可以使p元素拥有垂直滚动条。然后，通过“::-webkit-scrollbar”样式来设置滚动条本身的样式。在这个例子中，我们将滚动条的宽度设置为10像素。
3. 更多滚动条样式
除了“::-webkit-scrollbar-thumb”之外，还可以使用其他样式来自定义滚动条，如下所示:

p::-webkit-scrollbar-button:start:decrement {
    height: 20px;
    display: block;
}
p::-webkit-scrollbar-button:end:increment {
    height: 20px;
    display: block;
}
p::-webkit-scrollbar-track {
    background-color: #f1f1f1; 
}
p::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 10px;
}
p::-webkit-scrollbar-thumb:hover {
    background-color: #555; 
} 

这些样式设置将滚动条拇指的形状更改为圆形，以及在拇指悬停在滚动条上时更改其背景颜色。
总之，通过使用CSS样式，可以轻松自定义滚动条的外观，进一步美化你的网页设计。