浅析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新特性应用之过渡与动画
Jan 10 HTML / CSS
分享CSS3中必须要知道的10个顶级命令
Apr 26 HTML / CSS
css3动画事件—webkitAnimationEnd与计时器time事件
Jan 31 HTML / CSS
使用JS+CSS3技术:让你的名字动起来
Apr 27 HTML / CSS
利用css3如何设置没有上下边的列表间隔线
Jul 03 HTML / CSS
HTML5 Plus 实现手机APP拍照或相册选择图片上传功能
Jul 13 HTML / CSS
基于Canvas+Vue的弹幕组件的实现
Jul 23 HTML / CSS
HTML5样式控制示例代码
Nov 27 HTML / CSS
html5的canvas实现3d雪花飘舞效果
Dec 27 HTML / CSS
基于HTML5代码实现折叠菜单附源码下载
Nov 27 HTML / CSS
html5唤醒APP小记
Mar 27 HTML / CSS
关于CSS自定义属性与前端页面的主题切换问题
Mar 21 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
模拟OICQ的实现思路和核心程序(二)
2006/10/09 PHP
用PHP实现递归循环每一个目录
2010/08/08 PHP
php数组函数序列 之array_count_values() 统计数组中所有值出现的次数函数
2011/10/29 PHP
有道搜索和IP138的IP的API接口(PHP应用)
2012/11/29 PHP
php实现的三个常用加密解密功能函数示例
2017/11/06 PHP
Aster vs KG BO3 第三场2.19
2021/03/10 DOTA
JavaScript-世界上误解最深的语言分析
2007/08/12 Javascript
精通JavaScript 纠正 cleanWhitespace函数
2010/03/11 Javascript
JavaScript中的排序算法代码
2011/02/22 Javascript
jquery全选/全不选/反选另一种实现方法(配合原生js)
2013/04/07 Javascript
浅析js设置控件的readonly与enabled属性问题
2013/12/25 Javascript
Node.js实现在目录中查找某个字符串及所在文件
2014/09/03 Javascript
nodejs中使用多线程编程的方法实例
2015/03/24 NodeJs
js实现延迟加载的方法
2015/06/24 Javascript
基于Node.js + WebSocket打造即时聊天程序嗨聊
2016/11/29 Javascript
jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
2017/04/02 jQuery
Vue2几种常见开局方式详解
2017/09/09 Javascript
基于jquery.page.js实现分页效果
2018/01/01 jQuery
Vue使用枚举类型实现HTML下拉框步骤详解
2018/02/05 Javascript
微信小程序学习笔记之本地数据缓存功能详解
2019/03/29 Javascript
JavaScript中跨域问题的深入理解
2021/03/04 Javascript
python中使用enumerate函数遍历元素实例
2014/06/16 Python
详解Python with/as使用说明
2018/12/13 Python
pip指定python位置安装软件包的方法
2019/07/12 Python
用Python+OpenCV对比图像质量的几种方法
2019/07/15 Python
详解Django自定义图片和文件上传路径(upload_to)的2种方式
2020/12/01 Python
巧用CSS3 border实现图片遮罩效果代码
2012/04/09 HTML / CSS
html5教程制作简单画板代码分享
2013/12/04 HTML / CSS
英国皇室御用百货:福南梅森(Fortnum & Mason)
2017/12/03 全球购物
Ralph Lauren法国官网:美国高品味时装品牌
2017/12/08 全球购物
为什么Runtime.exec(“ls”)没有任何输出?
2014/10/03 面试题
餐饮服务食品安全责任书
2014/07/25 职场文书
2014党员学习兰辉先进事迹思想汇报
2014/09/17 职场文书
2016年教师节特级教师获奖感言
2015/12/09 职场文书
剑指Offer之Java算法习题精讲二叉树专项训练
2022/03/21 Java/Android
手把手带你彻底卸载MySQL数据库
2022/06/14 MySQL