-webkit-tap-highlight-color

webkit的css扩展:

1、-webkit-tap-highlight-color:

这个属性是用于设定元素在移动设备(如Adnroid、iOS)上被触发点击事件时,响应的背景框的颜色。

有事件监听的元素被点击的时候会被高亮显示,比如我的android上表现为一个蓝框加上半透明的背景

   -webkit-tap-highlight-color:transparent;或者

   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

2、-webkit-line-clamp

  限制块元素显示的文本行数,注意:组合使用;

  <style>

    overflow:hidden;

    text-overflow:ellipsis;//省略号...显示

    display:-webkit-box;//将对象作为弹性伸缩盒子模型显示

    -webkit-line-clamp:2;//行数

    -webkit-box-orient:vertical;//设置或检索伸缩盒对象的子元素的排列方式

  </style>

3、-webkit-touch-callout:

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

  none:系统默认菜单被禁用;

  反之,inherit。

4、-webkit-appearance:

  none:改变按钮和其他控件的默认appearance样式(常用于ios下移除原生样式);

5、-webkit-text-size-adjust:

  当字体<12px,在chrome中显示仍为12px,解决方式:

  注意:不要放在body上,不然页面缩放会失效;body会继承定义在html的样式;用-webkit-text-size-adjust不要定义成可继承的或全局的。

用法:

html {
    color: #000;
    background: #fff;
    overflow-y: scroll;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%
}

html * {
    outline: 0;
    -webkit-text-size-adjust: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0)
}


补充:

1、设置整个页面选中文字颜色和背景色的方法:

<style>
   ::selection { background:deeppink; color:lightgreen; } ::-moz-selection { background:deeppink; color:lightgreen; } ::-webkit-selection { background:deeppink; color:lightgreen;}
</style>




原文地址:https://www.cnblogs.com/wang715100018066/p/6006936.html