css_scrollBar滚动条.html

最新推荐文章于 2023-04-21 22:55:31 发布

学无止境慢慢来

最新推荐文章于 2023-04-21 22:55:31 发布

阅读量149

点赞数

分类专栏： CSS

原文链接：https://www.jianshu.com/p/c2addb233acd

版权

CSS 专栏收录该内容

71 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css_scrollBar滚动条</title>
    <style>
        /*参考：https://www.jianshu.com/p/c2addb233acd*/
        .test {
            width: 100px;
            height: 200px;
            overflow: auto;
            border: 1px dashed blue;
            padding: 5px;
        }

        .test-1::-webkit-scrollbar {
            /*滚动条整体样式*/
            width: 5px; /*竖滚动条的尺寸*/
            height: 0; /*横滚动条的尺寸*/
        }

        .test-1::-webkit-scrollbar-thumb {
            /*滚动块*/
            border-radius: 5px;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.2) inset;
            background: rgba(130, 130, 200, 1);
        }

        .test-1::-webkit-scrollbar-track {
            /*滚动轨道*/
            box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
            border-radius: 5px;
            background: rgb(255, 255, 255);
        }
    </style>
</head>
<body>

<div class="test test-1">
    -西青区位于天津市中心城区西南部，毗邻外环线和梅江生态居住区，交通发达，连通各地，
    处于天津市航空、海运、公路、铁路的立体交通网当中<br>
    -西青区距市中心5公里，距天津火车站12公里，距天津滨海国际机场14公里，距天津港30公里，
    距首都国际机场120公里，距北京大兴国际机场100公里，距雄安新区60公里<br>
    <br>
    <span class="fontBold">9条高速公路通达各地</span><br>
    -津港高速、津汕高速、津沧高速、京沪高速、津保高速、津晋高速、宁静高速、长深高速、荣乌高速<br><br>
    <span class="fontBold">多条高铁穿行其间，地区交流快速便捷</span><br>
    -京津城际高铁、京沪高铁、京沪高铁二线、津雄高铁<br><br>
    <span class="fontBold">接驳市内主干道，重要交通枢纽，交通十分便利</span><br>
    -区内4处公交中心，多条公交线路，交通便利，公路与市内主干道相连，地铁相通，直达重要交通枢纽<br>
    -天津地铁规划29条线路，已开通1、2、3、5、6、9号线，<br>
    建设中的还有7、4、10、12、11号线(南段)及1号线东延长线<br>
    -地铁3号线是天津地铁的南北骨干线路，连通天津南站与中心城区，从天津南站出发30分钟直达天津站，<br>
    地铁3号线还与多条地铁线路实现换乘，从天津南站出发，天津站换乘2号线50分钟直达天津机场，<br>
    天津站换乘9号线更可直通滨海新区（天津经济技术开发区）
</div>

</body>
</html>

学无止境慢慢来

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css_scrollBar滚动条.html

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>css scrollBarStyle</title> <style> /*参考：https://www.jianshu.com/p/c...
复制链接

扫一扫

专栏目录