浅析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教程(10):CSS3 HSL声明设置颜色
Apr 02 HTML / CSS
用CSS3实现Win8风格的方格导航菜单效果
Apr 10 HTML / CSS
你应该知道的30个css选择器
Mar 19 HTML / CSS
利用CSS3实现开门效果实例源码
Aug 22 HTML / CSS
HTML5梦幻之旅——炫丽的流星雨效果实现过程
Aug 06 HTML / CSS
Html5跳转到APP指定页面的实现
Jan 14 HTML / CSS
HTML5 drag和drop具体使用详解
Jan 18 HTML / CSS
css animation配合SVG制作能量流动效果
Mar 24 HTML / CSS
CSS3 天气图标动画效果
Apr 06 HTML / CSS
不要在HTML中滥用div
May 08 HTML / CSS
详解CSS故障艺术
May 25 HTML / CSS
使用CSS实现小三角边框原理解析
Nov 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+AJAX传送中文会导致乱码的问题的解决方法
2008/09/08 PHP
解析zend studio中直接导入svn中的项目的方法步骤
2013/06/21 PHP
codeigniter中实现一次性加载多个view的方法
2015/03/20 PHP
PHP生成(支持多模板)二维码海报代码
2018/04/30 PHP
yii2.0框架多模型操作示例【添加/修改/删除】
2020/04/13 PHP
lib.utf.js
2007/08/21 Javascript
javascript 流畅动画实现原理
2009/09/08 Javascript
javascript 混合的构造函数和原型方式,动态原型方式
2009/12/07 Javascript
初窥JQuery(二)事件机制(2)
2010/12/06 Javascript
分享精心挑选的23款美轮美奂的jQuery 图片特效插件
2012/08/14 Javascript
jquery 页面滚动到指定DIV实现代码
2013/09/25 Javascript
jquery图片切换插件
2015/03/16 Javascript
JS动态创建元素的两种方法
2016/04/20 Javascript
使用do...while的方法输入一个月中所有的周日(实例代码)
2016/07/22 Javascript
request请求获取参数的实现方法(post和get两种方式)
2016/09/27 Javascript
浅析JS中对函数function的理解(基础篇)
2016/10/14 Javascript
基于jQuery实现的幻灯图片切换
2016/12/02 Javascript
vuejs实现本地数据的筛选分页功能思路详解
2017/11/15 Javascript
vue 自定义全局方法,在组件里面的使用介绍
2018/02/28 Javascript
微信小程序自定义tab实现多层tab嵌套功能
2018/06/15 Javascript
浅谈关于iview表单验证的问题
2018/09/29 Javascript
微信小程序自定义组件实现环形进度条
2020/11/17 Javascript
vue实现树状表格效果
2020/12/29 Vue.js
python在每个字符后添加空格的实例
2018/05/07 Python
对python_discover方法遍历所有执行的用例详解
2019/02/13 Python
Form表单及django的form表单的补充
2019/07/25 Python
flask 实现token机制的示例代码
2019/11/07 Python
详解canvas.toDataURL()报错的解决方案全都在这了
2020/03/31 HTML / CSS
database面试题
2013/03/28 面试题
安全承诺书范文
2014/03/26 职场文书
交通事故协议书
2014/04/15 职场文书
教师政风行风评议心得体会
2014/10/21 职场文书
大足石刻导游词
2015/02/02 职场文书
高中生思想道德自我评价
2015/03/09 职场文书
德能勤绩工作总结
2015/08/11 职场文书
SQL中去除重复数据的几种方法汇总(窗口函数对数据去重)
2023/05/08 MySQL