css禁止换行，及设置滚动条样式

最新推荐文章于 2024-03-25 19:16:23 发布

原创最新推荐文章于 2024-03-25 19:16:23 发布 · 554 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍了如何使用CSS来定制滚动条的样式，包括滚动条的整体尺寸、轨道颜色及阴影效果、滑块的颜色及阴影效果等。通过这些设置，可以实现更加美观且符合网站整体风格的滚动条。

禁止换行：

style="white-space:nowrap;"

滚动条样式：

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar
{
    width: 16px;
    height: 16px;
    background-color: #F5F5F5;
}

/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: #F5F5F5;
}

/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb
{
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #555;
}