zoukankan      html  css  js  c++  java
  • 一些容易忽略的CSS3属性

    1.-webkit-tap-highlight-color

    //这个属性只用于iOS (iPhone和iPad)。当你点击一个链接或者通过Javascript定义的可点击元素的时候,它就会出现一个半透明的灰色背景。要重设这个表现,你可以设置-webkit-tap-highlight-color为任何颜色。想要禁用这个高亮,设置颜色的alpha值为0即可。
    示例:设置高亮色为50%透明的红色:
    -webkit-tap-highlight-color: rgba(255,0,0,0.5);
    浏览器支持: 只有iOS(iPhone和iPad).
     

    2.text-size-adjust

    //iPhone 和 Android 的浏览器纵向 (Portrate mode) 和橫向 (Landscape mode) 模式皆有自动调整字体大小的功能。控制它的就是 CSS 中的 -webkit-text-size-adjust。

    text-size-adjust 设为 none 或者 100% 关闭字体大小自动调整功能.

    3.outline:none

    //input,textarea{outline:none}  取消chrome下默认的文本框聚焦样式,移动端不起作用。想要去除文本框的默认样式可以使用-webkit-appearance。

    4. -webkit-appearance: none;  

    //消除输入框和按钮的原生外观,在iOS上加上这个属性才能给按钮和输入框自定义样式 。   注意:不同type的input使用这个属性之后表现不一。text、button无样式,radio、checkbox直接消失

    5.-webkit-user-select: none;

    // 禁止页面文字选择 ,此属性不继承,一般加在body上规定整个body的文字都不会自动调整

    6. -webkit-touch-callout:none;  

    // 禁用长按页面时的弹出菜单(iOS下有效) ,img和a标签都要加

    7.-webkit-appearance 和 -moz-appearance

    //你曾经想过将一张图片伪装成单选按钮么?或者,一个输入框看起来像一个复选框?那么现在appearance 出现了。即便你并不想要让一个链接看起来总是像个按钮,下面这个例子也可以让你了解到,只要你愿意就可以做到的:a {-webkit-appearance: button;-moz-appearance: button;}

    8.text-overflow

    //采用CSS3和text-overflow: ellipsis,如果文字比它的容器的宽度要长的话,你就可以强制文字以”…”结束它。唯一的要求是设置overflow:hidden。

    9.background-attachment

    //当你为一个设置了overflow:auto的元素指定背景图片的时候,当内容太多而出现滚动条后,拖动滚动条就会发现背景图片的位置是固定的,而不是随着滚动条移动。如果你想要背景图片随着内容而滚动,可以设置background-attachment:local。

    
    
    
     
  • 相关阅读:
    页面状态加载.... JS
    创建windows服务&监控SQL数据运行状态(原)
    为图片添加锚点
    当jquery遇上了json 哇哈哈
    关于SVN源代码管理
    最新最全的ASP.NET学习资源大全
    .NET开发人员必知的八个网站
    关于回车执行(回车触发事件)
    DIV+CSS布局
    优化Linux下的内核TCP参数来提高服务器负载能力
  • 原文地址:https://www.cnblogs.com/douglasvegas/p/6956811.html
Copyright © 2011-2022 走看看