CSS真!全屏

栏目: CSS · 发布时间: 7年前

内容简介:css3可以自定义滚动条样式,今天发现了一个花式玩法,一起看看? 之前写过网页时滚动条时是不是都这个样子的呢这个滚动条好看么?废话肯定不好看! 如果设计湿给个带背景的设计图,又当如何呢?

css3可以自定义滚动条样式,今天发现了一个花式玩法,一起看看? 之前写过网页时滚动条时是不是都这个样子的呢

CSS真!全屏

这个滚动条好看么?

CSS真!全屏

废话肯定不好看! 如果设计湿给个带背景的设计图,又当如何呢?

CSS真!全屏
CSS真!全屏

是不是更丑了!

CSS真!全屏

前方高能登场!非战斗人员请火速避开!

CSS真!全屏
CSS真!全屏
CSS真!全屏

请注意第二张图并非滚动条不见了,是设置了与背景色同色,(是不是多此一举了,用户体验去哪了!)

CSS真!全屏

是不是美观了不少?

css代码奉上

::-webkit-scrollbar {
        width: 10px;
        height: 1px;
    }

    ::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: none;
        /* background: hsl(183, 97%, 27%); */
        -webkit-box-shadow: none;
    }

    ::-webkit-scrollbar-track {
        -webkit-box-shadow:none;
        border-radius: 10px;
        background: #06b0b9;
        -webkit-box-shadow: none;
    }
复制代码
CSS真!全屏

查了一下兼容表,兼容性还可以,可以搞一搞! 敬请各位看官多多斧正。

CSS真!全屏

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。

Math Adventures with Python

Math Adventures with Python

Peter Farrell / No Starch Press / 2018-11-13 / GBP 24.99

Learn math by getting creative with code! Use the Python programming language to transform learning high school-level math topics like algebra, geometry, trigonometry, and calculus! In Math Adventu......一起来看看 《Math Adventures with Python》 这本书的介绍吧!

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具