火狐浏览器滚动条样式修改 css

最新推荐文章于 2024-05-21 09:39:34 发布

不想996了的小姑娘

最新推荐文章于 2024-05-21 09:39:34 发布

阅读量2.7k

点赞数

分类专栏：神奇的css

原文链接：https://www.cnblogs.com/cisbest/p/13338397.html

版权

神奇的css 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

纯css设置Firefox火狐浏览器的滚动条样式

设置Firefox滚动条样式的css属性只有 scrollbar-color 和 scrollbar-width 这两个。看名字就知道第一个是设置滚动条颜色的，第二个是设置滚动条(竖直方向)宽度，(水平方向)高度的。

在Firefox中设置滚动条的样式


```typescript
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>在Firefox中设置滚动条的样式</title>
    <style>
        .wrap{
            height: 300px;
            width: 300px;
            background-color: #e9f;
            overflow: scroll;
            scrollbar-color: red #0ff;
            scrollbar-width: 88px;
        }
        .inner{
            height: 500px;
            width: 500px;
            background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
            linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
            linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="inner"></div>
    </div>
</body>
</html>

不想996了的小姑娘

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
火狐浏览器滚动条样式修改 css

纯css设置Firefox火狐浏览器的滚动条样式设置Firefox滚动条样式的css属性只有 scrollbar-color 和 scrollbar-width 这两个。看名字就知道第一个是设置滚动条颜色的，第二个是设置滚动条(竖直方向)宽度，(水平方向)高度的。在Firefox中设置滚动条的样式```typescript<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8" /&
复制链接

扫一扫