浅析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 相关文章推荐
css3弹性盒模型(Flexbox)详细介绍
Oct 08 HTML / CSS
CSS3的first-child选择器实战攻略
Apr 28 HTML / CSS
CSS3制作酷炫的条纹背景
Nov 09 HTML / CSS
canvas像素画板的实现代码
Nov 21 HTML / CSS
HTML5之SVG 2D入门11—用户交互性(动画)介绍及应用
Jan 30 HTML / CSS
HTML5 Canvas旋转动画的2个代码例子(一个旋转的太极图效果)
Apr 10 HTML / CSS
HTML5新增的表单元素和属性实例解析
Jul 07 HTML / CSS
H5调用相机拍照并压缩图片的实例代码
Jul 20 HTML / CSS
HTML5实现可缩放时钟代码
Aug 28 HTML / CSS
浅析HTML5中的download属性使用
Mar 13 HTML / CSS
使用layui实现左侧菜单栏及动态操作tab项的方法
Nov 10 HTML / CSS
html,css,javascript是怎样变成页面的
May 07 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常用函数汇总
2014/12/17 PHP
PHP快速排序quicksort实例详解
2016/09/28 PHP
PHP的PDO大对象(LOBs)
2019/01/27 PHP
TNC vs BOOM BO3 第三场2.13
2021/03/10 DOTA
js调试工具 Javascript Debug Toolkit 2.0.0版本发布
2008/12/02 Javascript
Jquery练习之表单验证实现代码
2010/12/14 Javascript
『jQuery』名称冲突使用noConflict方法解决
2013/04/22 Javascript
Javascript常用字符串判断函数代码分享
2014/12/08 Javascript
基于JavaScript如何实现ajax调用后台定义的方法
2015/12/29 Javascript
Bootstrap轮播插件简单使用方法介绍
2016/06/21 Javascript
浅谈JS中的三种字符串连接方式及其性能比较
2016/09/02 Javascript
Javascript 正则表达式校验数字的简单实例
2016/11/02 Javascript
JavaScript实现获取用户单击body中所有A标签内容的方法
2017/06/05 Javascript
node.js学习之断言assert的使用示例
2017/09/28 Javascript
jquery 通过ajax请求获取后台数据显示在表格上的方法
2018/08/08 jQuery
在vue项目中,将juery设置为全局变量的方法
2018/09/25 Javascript
vue+高德地图写地图选址组件的方法
2019/05/18 Javascript
python BeautifulSoup设置页面编码的方法
2015/04/03 Python
Python检测生僻字的实现方法
2016/10/23 Python
matplotlib subplots 调整子图间矩的实例
2018/05/25 Python
初探利用Python进行图文识别(OCR)
2019/02/26 Python
Python2与Python3的区别实例分析
2019/04/11 Python
简单了解python PEP的一些知识
2019/07/13 Python
Flask框架模板继承实现方法分析
2019/07/31 Python
Django 自定义分页器的实现代码
2019/11/24 Python
pytorch:model.train和model.eval用法及区别详解
2020/02/20 Python
Python爬虫工具requests-html使用解析
2020/04/29 Python
Python DES加密实现原理及实例解析
2020/07/17 Python
HTML5表单验证特性(知识点小结)
2020/03/10 HTML / CSS
英国最大的经认证的有机超市:Planet Organic
2018/02/02 全球购物
专注澳大利亚特产和新西兰特产的澳洲中文网:0061澳洲制造
2019/03/24 全球购物
C++面试题目
2013/06/25 面试题
会计专业应届生求职信
2013/11/24 职场文书
大学生党课思想汇报
2013/12/29 职场文书
远程教育学习心得体会
2016/01/23 职场文书
vue基于Teleport实现Modal组件
2021/05/31 Vue.js