滚动条样式-IE,chrome

本文详细介绍了如何使用CSS对网页滚动条进行个性化设置,包括滚动条的整体外观、按钮、滑块等各个部分的具体样式调整。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<style type="text/css">
        *{
            scrollbar-face-color:#F3F3F3; /*面子*/
            scrollbar-arrow-color:#C0C0C0; /*箭头*/
            scrollbar-3dlight-color:#C0C0C0; /*最外左*/
            scrollbar-highlight-color:#FFFFFF; /*左二*/
            scrollbar-shadow-color:#FFFFFF; /*右二*/
            scrollbar-darkshadow-color:#C0C0C0; /*右一*/
            scrollbar-track-color:#F3F3F3; /*滑道*/
        }
        /*滚动条整体*/
        ::-webkit-scrollbar{
            width:14px; /*滚动条宽度*/
        }
        /*滚动条按钮*/
        ::-webkit-scrollbar-button {

        }
        ::-webkit-scrollbar-track{
            background-color:#F3F3F3;  /*滑道全部*/
        }
        ::-webkit-scrollbar-track-piece{
            background-color:#F3F3F3;  /*滑道*/
            -webkit-border-radius:4px; /*滑道圆角宽度*/
        }
        ::-webkit-scrollbar-thumb{
            background-color:#F3F3F3; /*滑动条表面*/
            border:solid 1px #C0C0C0; /*滑动条边框*/
            border-radius:4px;  /*滑动条圆角宽度*/
        }
        /*横竖滚动条交角*/
        ::-webkit-scrollbar-corner {
            background-color: #F3F3F3;
        }
        /*横竖滚动条交角图案*/
        ::-webkit-resizer {
            /*background-image: url(/public/img/resizer-inactive.png);*/
           background-repeat: no-repeat;
           background-position: bottom right;
       }
       /*鼠标滑过滑动条*/
        ::-webkit-scrollbar-thumb:hover{
            background-color:#F3F3E0;
        }
    </style>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值