浅析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 icon font完全指南(CSS3 font 会取代icon图标)
Jan 06 HTML / CSS
纯CSS实现聊天框小尖角、气泡效果
Apr 04 HTML / CSS
CSS3中Animation动画属性用法详解
Jul 04 HTML / CSS
CSS3 input框的实现代码类似Google登录的动画效果
Aug 04 HTML / CSS
详解HTML5通讯录获取指定多个人的信息
Dec 20 HTML / CSS
整理的15个非常有用的 HTML5 开发教程和速查手册
Oct 18 HTML / CSS
HTML5离线缓存在tomcat下部署可实现图片flash等离线浏览
Dec 13 HTML / CSS
HTML5 Canvas锯齿图代码实例
Apr 10 HTML / CSS
HTML5 新标签全部总汇(推荐)
Jun 13 HTML / CSS
配置H5的滚动条样式的示例代码
Mar 09 HTML / CSS
前端实现背景虚化但内容清晰且自适应 的实例代码
Aug 01 HTML / CSS
前端使用canvas生成盲水印的加密解密的实现
Dec 16 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获取网页并输出的实现代码(Zjmainstay)
2012/08/31 PHP
php随机输出名人名言的代码
2012/10/07 PHP
json的键名为数字时的调用方式(示例代码)
2013/11/15 PHP
PHP 错误处理机制
2015/07/06 PHP
项目中应用Redis+Php的场景
2016/05/22 PHP
基于jquery的无刷新分页技术
2011/06/11 Javascript
$.ajax返回的JSON无法执行success的解决方法
2011/09/09 Javascript
jQuery数据显示插件整合实现代码
2011/10/24 Javascript
原生js仿jq判断当前浏览器是否为ie,精确到ie6~8
2014/08/30 Javascript
js阻止浏览器默认行为触发的通用方法(推荐)
2016/05/15 Javascript
微信小程序 教程之数据绑定
2016/10/18 Javascript
javascript学习之json入门
2016/12/22 Javascript
解决IE11 vue +webpack 项目中数据更新后页面没有刷新的问题
2018/09/25 Javascript
JavaScript简单实现的仿微博留言功能示例
2019/01/17 Javascript
layui中select,radio设置不生效的解决方法
2019/09/05 Javascript
解决layui数据表格排序图标被超出的表头挤出去的问题
2019/09/19 Javascript
[03:56]还原FTP电影首映式 DOTA2群星拼出遗迹世界
2014/03/26 DOTA
python3实现抓取网页资源的 N 种方法
2017/05/02 Python
Python学生成绩管理系统简洁版
2020/04/05 Python
Python实现OpenCV的安装与使用示例
2018/03/30 Python
Python 使用Numpy对矩阵进行转置的方法
2019/01/28 Python
python将excel转换为csv的代码方法总结
2019/07/03 Python
python中使用paramiko模块并实现远程连接服务器执行上传下载功能
2020/02/29 Python
详解在Python中使用Torchmoji将文本转换为表情符号
2020/07/27 Python
10个python爬虫入门实例(小结)
2020/11/01 Python
娇韵诗加拿大官网:Clarins加拿大
2017/11/20 全球购物
英国领先的体验日提供商:Buyagift
2019/04/19 全球购物
美国Jeep配件购物网站:Morris 4×4 Center
2019/05/01 全球购物
德国玩具商店:Planet Happy DE
2021/01/16 全球购物
工程造价专业大学生自荐信
2013/10/01 职场文书
优秀学生自我鉴定范例
2013/12/18 职场文书
信息服务专业毕业生求职信
2014/03/02 职场文书
公司门卫工作职责
2014/06/28 职场文书
在校大学生自我评价范文
2014/09/12 职场文书
军事博物馆观后感
2015/06/05 职场文书
2017元旦、春节期间廉洁自律承诺书
2016/03/25 职场文书