• -webkit/IE/Firefox的一些样式


    仅限于-webkit的样式特效;
    -webkit-overflow-scrolling:touch;滚动时回弹效果;
    如果出现偶尔卡住不动的情况,那么在使用该属性的元素上不设置定位或者手动设置定位为static;
    如果添加动态内容页面不能滚动,让子元素height+1;
    方法就是在webkit-overflow-scrolling:touch属性的下一层子元素上,将height加1%或1px。从而主动触发scrollbar
    main-inner {
    min-height: calc(100% + 1px)
    }

    main:after {
    min-height: calc(100% + 1px)
    }

    如果需要在body使用这样设置效果:
    html,body{
    height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    }
    ------------------------------------------------------------------------
    -webkit-user-drag:auto | element | none;
    auto:使用默认的拖拽行为,这种情况只有图片和链接可以被拖拽。
    element:整个元素(不仅仅只是它的内容)可拖拽。
    none:元素不能被拖动。在通过选中后可拖拽。
    --------------------------------------------------------------
    -webkit-tap-highlight-color:<color>
    当用户轻按一个链接或者JavaScript可点击元素时给元素覆盖一个高亮色;
    如果想取消这个高亮,将值设置为全透明即可,比如 transparent
    --------------------------------------------------------------
    -webkit-box-reflect:none | <direction> <offset>? <mask-box-image>?
    <direction> = above | below | left | right
    <offset> = <length> | <percentage>
    <mask-box-image> = none | <url> | <linear-gradient> | <radial-gradient> | <repeating-linear-gradient> | <repeating-radial-gradient>
    none:
    无倒影
    <direction> Demo: 简单图片倒影 See with Webkit
    above:
    指定倒影在对象的上边
    below:
    指定倒影在对象的下边
    left:
    指定倒影在对象的左边
    right:
    指定倒影在对象的右边
    <offset> Demo: 图片与倒影间隔 See with Webkit
    <length>:
    用长度值来定义倒影与对象之间的间隔。可以为负值
    <percentage>:
    用百分比来定义倒影与对象之间的间隔。可以为负值
    <mask-box-image> Demo: 更真实的图片倒影 文字倒影与渐变 See with Webkit
    none:无遮罩图像
    <url>:使用绝对或相对地址指定遮罩图像。
    <linear-gradient>:使用线性渐变创建遮罩图像。
    <radial-gradient>:使用径向(放射性)渐变创建遮罩图像。
    <repeating-linear-gradient>:使用重复的线性渐变创建背遮罩像。
    <repeating-radial-gradient>:使用重复的径向(放射性)渐变创建遮罩图像。
    --------------------------------------------------------------
    -webkit-text-stroke-color:<color>
    文字的描边颜色。
    -webkit-text-stroke-width:<length>
    用长度值指定描边厚度(如2px之类的),不允许负值;
    --------------------------------------------------------------
    -webkit-text-fill-color:<color>
    默认值:transparent;
    --------------------------------------------------------------

    仅限于IE的样式特效;
    scrollbar-3dlight-color:<color>
    检索或设置对象滚动条3d亮色阴影边框(threedlightshadow)的外观颜色。
    scrollbar-darkshadow-color:<color>(除table系外的所有块级元素)
    检索或设置对象滚动条3d暗色阴影边框(threeddarkshadow)的外观颜色。
    scrollbar-highlight-color:<color>
    检索或设置对象滚动条3d高亮边框(threedhighlight)的外观颜色。
    scrollbar-shadow-color:<color>
    检索或设置对象滚动条3d阴影边框(threedshadow)的外观颜色。
    以上默认值都是:threedshadow;适用于:除table系外的所有块级元素
    --------------------------------------------------------------
    scrollbar-arrow-color:<color>
    检索或设置对象滚动条方向箭头的颜色。当滚动条出现但不可用时,此属性失效。
    默认值:buttontext;适用于:除table系外的所有块级元素
    --------------------------------------------------------------
    scrollbar-face-color:<color>
    检索或设置对象滚动条3D表面的(threedface)的外观颜色。
    默认值:threedface;适用于:除table系外的所有块级元素
    --------------------------------------------------------------
    scrollbar-track-color:<color>
    检索或设置对象滚动条拖动区域的外观颜色。
    默认值:transparent;适用于:除table系外的所有块级元素
    --------------------------------------------------------------
    scrollbar-base-color:<color>
    检索或设置对象滚动条基准颜色。其它界面颜色将据此自动调整。
    默认值:transparent;适用于:除table系外的所有块级元素
    --------------------------------------------------------------
    filter:<filter>+ 适用于:所有元素;
    两种效果相同
    div{filter:alpha(opacity=50);} /* for IE8 and earlier */
    div{opacity:.5;} /* for IE9 and other browsers */
    --------------------------------------------------------------
    behavior:<url> | url(#objID) | url(#default#behaviorName)
    适用于:所有元素
    <url>:
    使用绝对或相对地址指定DHTML行为组件(.htc)
    url(#objID):
    用二进制实现DHTML行为,#objID为object对象指定的id特性
    url(#default#behaviorName):
    IE的默认行为。由behaviorName指定(设置或检索对象的DHTML行为。多个行为之间用空格隔开。)
    如下示例:
    div{behavior:url(fly.htc) url(shy.htc);}
    --------------------------------------------------------------
    Firefox下面的
    border-colors:(一般有四个方向的值)
    border-top-colors
    border-right-colors
    border-bottom-colors
    border-left-colors
    border的width为(n)px,那么最多可以设置n组边框色,
    每组边框色宽度为1px;如果border的width为10px,
    却只设置了6组边框色,那么最后一组边框色将自动渲染剩余的宽度
    --------------------------------------------------------------

  • 相关阅读:
    关于maven下载速度慢,下载完的依赖包不知去向的应对措施
    进一步解析二分搜索树的实现
    mysql语法建库建表综合整理是示例
    走进二分搜索树的第一课
    优先队列和堆
    window系统mysql安装后获取默认密码
    微信小程序中使用云开发获取openid
    使用IDEA将springboot框架导入的两种方法
    C/C++、Qt4实现FTP客户端(有无界面版)
    云服务器搭建代理服务器 —— 某sock ,简单说明
  • 原文地址:https://www.cnblogs.com/lhl66/p/8598189.html
Copyright © 2020-2023  润新知