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>