zoukankan      html  css  js  c++  java
  • CSS:scrollbar的属性及样式分类

    • overflow            内容溢出时的设置(设定被设定对象是否显示滚动条)
    • overflow-x         水平方向内容溢出时的设置
    • overflow-y         垂直方向内容溢出时的设置

        以上三个属性设置的值为visible(默认值)scroll、hidden、auto

    • scrollbar-3d-light-color         立体滚动条亮边的颜色(设置滚动条的颜色)
    • scrollbar-arrow-color            上下按钮上三角箭头的颜色
    • scrollbar-base-color             滚动条的基本颜色
    • scrollbar-dark-shadow-color 立体滚动条强阴影的颜色
    • scrollbar-face-color              立体滚动条凸出部分的颜色
    • scrollbar-highlight-color        滚动条空白部分的颜色
    • scrollbar-shadow-color         立体滚动条阴影的颜色

    我们通过几个实例来讲解上述的样式属性: 
    1.让浏览器窗口永远都不出现滚动条

    •     没有水平滚动条    <body style="overflow-x:hidden">
    •     没有垂直滚动条    <body style="overflow-y:hidden">
    •     没有滚动条    <body style="overflow-x:hidden;overflow-y:hidden">或<body style="overflow:hidden"> http://www.o.com

    2.设定多行文本框的滚动条 

    •   没有水平滚动条   <textarea style="overflow-x:hidden"></textarea> 
    •   没有垂直滚动条   <textarea style="overflow-y:hidden"></textarea>
    •   没有滚动条         <textarea style="overflow-x:hidden;overflow-y:hidden"></textarea>   或<textarea style="overflow:hidden"></textarea>

    3.设定窗口滚动条的颜色

    设置窗口滚动条的颜色为红色<body style="scrollbar-base-color:red">
    scrollbar-base-color设定的是基本色,一般情况下只需要设置这一个属性就可以达到改变滚动条颜色的目的。
    加上一点特别的效果:
    <body style="scrollbar-arrow-color:yellow;scrollbar-base-color:lightsalmon"> 

    4.在样式表文件中定义好一个类,调用样式表。

    <style>
      .coolscrollbar{scrollbar-arrow-color:yellow;scrollbar-base-color:lightsalmon;}
    </style>

    这样调用:

    <textarea class="coolscrollbar"></textarea>
    • Scrollbar-Face-Color          为滚动条表面颜色设定;
    • Scrollbar-Highlight-Color    为滚动条上斜面和左斜面颜色设定;
    • Scrollbar-Shadow-Color     为滚动条下斜面和右斜面颜色设定;
    • Scrollbar-3Dlight-Color      为滚动条上边和左边的边沿颜色设定;
    • Scrollbar-Arrow-Color        为滚动条两端箭头颜色设定。
    • Scrollbar-Track-Color         为滚动条底板颜色设定;
    • Scrollbar-Darkshadow        为滚动条下边和右边边沿颜色设定。

     举例:

    body { 
    background-color: #ffffff; 
    color: #336699; 
    SCROLLBAR-FACE-COLOR: #BED8EB; 
    SCROLLBAR-SHADOW-COLOR: #DDF8FF; 
    SCROLLBAR-HIGHLIGHT-COLOR: #92C0D1; 
    SCROLLBAR-3DLIGHT-COLOR: #DDF8FF; 
    SCROLLBAR-DARKSHADOW-COLOR: #92C0D1; 
    SCROLLBAR-TRACK-COLOR:#BED8EB; 
    SCROLLBAR-ARROW-COLOR: #92C0D1 
    } 

    说明:滚动条必须和div的height配合使用,如果div未设置height,则滚动条属性设置会失效

  • 相关阅读:
    UnitTest 用法
    冒泡排序,快速排序
    Mysql 基础用法
    测试用例的设计方法
    测试分类
    测试模型
    软件开发模型
    day24作业
    day24
    spring常见错误之一个或多个筛选器启动失败。完整的详细信息将在相应的容器日志文件中找到
  • 原文地址:https://www.cnblogs.com/JoannaQ/p/3151838.html
Copyright © 2011-2022 走看看