css scrollBarStyle.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css scrollBarStyle</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: rgb(255,255,255);
        }

        .test-1::-webkit-scrollbar-track {
            /*滚动条里面轨道*/
            box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
            border-radius: 5px;
            background: rgba(23,71,135,1);
        }
    </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>
        
发布了198 篇原创文章 · 获赞 58 · 访问量 8万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览