浅析CSS3中鲜为人知的属性:-webkit-tap-highlight-color


Posted in HTML / CSS onJanuary 12, 2017

-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).

css3中-webkit-text-size-adjust详解     

1、当样式表里font-size<12px时,中文版chrome浏览器里字体显示仍为12px,这时可以用 html{-webkit-text-size-adjust:none;}

2、-webkit-text-size-adjust放在body上会导致页面缩放失效

3、body会继承定义在html的样式

4、用-webkit-text-size-adjust不要定义成可继承的或全局的

outline:none

(1)在pc端为a标签定义这个样式的目的是为了取消ie浏览器下点击a标签时出现的虚线。ie7及以下浏览器还不识别此属性,需要在a标签上添加hidefocus="true"

(2)input,textarea{outline:none}  取消chrome下默认的文本框聚焦样式

(3)在移动端是不起作用的,想要去除文本框的默认样式可以使用-webkit-appearance,聚焦时候默认样式的取消是-webkit-tap-highlight-color。

看到一些移动端reset文件加了此属性,其实是多余。

webkit-appearance

-webkit-appearance: none;   //消除输入框和按钮的原生外观,在iOS上加上这个属性才能给按钮和输入框自定义样式 。

注意:不同type的input使用这个属性之后表现不一。text、button无样式,radio、checkbox直接消失

-webkit-user-select  

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

-webkit-touch-callout  

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

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家学习或者使用CSS3能有一定的帮助,如果有疑问大家可以留言交流。

HTML / CSS 相关文章推荐
a标签的css样式四个状态
Mar 09 HTML / CSS
使用 css3 transform 属性来变换背景图的方法
May 07 HTML / CSS
前端隐藏出边界内容的实现方法
Apr 14 HTML / CSS
用React加CSS3实现微信拆红包动画效果
Mar 13 HTML / CSS
CSS3关于z-index不生效问题的解决
Feb 19 HTML / CSS
CSS3 border-radius圆角的实现方法及用法详解
Sep 14 HTML / CSS
Html5移动端弹幕动画实现示例代码
Aug 27 HTML / CSS
html5 canvas-1.canvas介绍(hello canvas)
Jan 07 HTML / CSS
HTML5 Canvas+JS控制电脑或手机上的摄像头实例
May 03 HTML / CSS
HTML5 拖放(Drag 和 Drop)详解与实例代码
Sep 14 HTML / CSS
详解html5 postMessage解决跨域通信的问题
Aug 17 HTML / CSS
Html5嵌入钉钉的实现示例
Jun 04 HTML / CSS
CSS3,线性渐变(linear-gradient)的使用总结
Jan 09 #HTML / CSS
详解CSS3中nth-child与nth-of-type的区别
Jan 05 #HTML / CSS
CSS3打造百度贴吧的3D翻牌效果示例
Jan 04 #HTML / CSS
谈谈对css属性box-sizing的了解
Jan 04 #HTML / CSS
纯CSS3制作的鼠标悬停时边框旋转
Jan 03 #HTML / CSS
HTML5+CSS3网页加载进度条的实现,下载进度条的代码实例
Dec 30 #HTML / CSS
HTML5+CSS3实例 :canvas 模拟实现电子彩票刮刮乐代码
Dec 30 #HTML / CSS
You might like
PHP统计二维数组元素个数的方法
2013/11/12 PHP
理解PHP中的stdClass类
2014/04/18 PHP
Ajax PHP JavaScript MySQL实现简易无刷新在线聊天室
2016/08/17 PHP
ThinkPHP+EasyUI之ComboTree中的会计科目树形菜单实现方法
2017/06/09 PHP
php语法检查的方法总结
2019/01/21 PHP
php常用的工具开发整理
2019/09/26 PHP
Laravel的Auth验证Token验证使用自定义Redis的例子
2019/09/30 PHP
基于Jquery与WebMethod投票功能实现代码
2011/01/19 Javascript
如何使用Javascript正则表达式来格式化XML内容
2013/07/04 Javascript
js监控IE火狐浏览器关闭、刷新、回退、前进事件
2014/07/23 Javascript
浅析AngularJs HTTP响应拦截器
2015/12/28 Javascript
jQuery插件实现图片轮播特效
2016/06/16 Javascript
JSON格式的时间/Date(2367828670431)/格式转为正常的年-月-日 格式的代码
2016/07/27 Javascript
jQuery插件jquery.kxbdmarquee.js实现无缝滚动效果
2017/02/15 Javascript
js上下视差滚动简单实现代码
2017/03/07 Javascript
JS遍历JSON数组及获取JSON数组长度操作示例【测试可用】
2018/12/12 Javascript
详解vue-cli项目开发/生产环境代理实现跨域请求
2019/07/23 Javascript
小程序input数据双向绑定实现方法
2019/10/17 Javascript
ES2020 已定稿,真实场景案例分析
2020/05/25 Javascript
vue v-model的用法解析
2020/10/19 Javascript
Python编写检测数据库SA用户的方法
2014/07/11 Python
python打开网页和暂停实例
2014/09/30 Python
Python中获取对象信息的方法
2015/04/27 Python
深入理解python中的闭包和装饰器
2016/06/12 Python
python实战教程之自动扫雷
2018/07/13 Python
使用python实现unix2dos和dos2unix命令的例子
2019/08/13 Python
python 串口读取+存储+输出处理实例
2019/12/26 Python
python 串行执行和并行执行实例
2020/04/30 Python
Python基于pillow库实现生成图片水印
2020/09/14 Python
Numpy ndarray 多维数组对象的使用
2021/02/10 Python
css3 线性渐变和径向渐变示例附图
2014/04/08 HTML / CSS
利用css3实现的简单的鼠标悬停按钮
2014/11/04 HTML / CSS
学习党的群众路线教育实践活动心得体会
2014/03/01 职场文书
单位消防安全责任书
2014/07/23 职场文书
毕业生对母校寄语
2015/02/26 职场文书
区域销售大会开幕词
2016/03/04 职场文书