浅析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动画(开启gpu加速)
Dec 23 HTML / CSS
html5+css3之动画在webapp中的应用
Nov 21 HTML / CSS
CSS3的常见transformation图形变化用法小结
May 13 HTML / CSS
CSS3贝塞尔曲线示例:创建链接悬停动画效果
Nov 19 HTML / CSS
详解HTML5 canvas绘图基本使用方法
Jan 29 HTML / CSS
html5中canvas学习笔记1-画板的尺寸与实际显示尺寸
Jan 06 HTML / CSS
html5构建触屏网站之touch事件介绍
Jan 07 HTML / CSS
HTML5的表单(绝对特别强大的功能)使用示例
Jun 20 HTML / CSS
整理HTML5中表单的常用属性及新属性
Feb 19 HTML / CSS
详解html2canvas截图不能截取圆角图片的解决方案
Jan 30 HTML / CSS
使用html5实现表格实现标题合并的实例代码
May 13 HTML / CSS
关于HTML编码导致的乱码问题
Sep 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
codeigniter数据库操作函数汇总
2014/06/12 PHP
Yii使用DeleteAll连表删除出现报错问题的解决方法
2016/07/14 PHP
php+mysql开发的最简单在线题库(在线做题系统)完整案例
2019/03/30 PHP
Yii2 queue的队列使用详解
2019/07/19 PHP
学习JavaScript正则表达式
2015/11/13 Javascript
Ext JS动态加载JavaScript创建窗体的方法
2016/06/23 Javascript
BootStrap轻松实现微信页面开发代码分享
2016/10/21 Javascript
JavaScript实现向select下拉框中添加和删除元素的方法
2017/03/07 Javascript
Vue-cli proxyTable 解决开发环境的跨域问题详解
2017/05/18 Javascript
jsonp跨域请求详解
2017/07/13 Javascript
Node.js 使用流实现读写同步边读边写功能
2017/09/11 Javascript
JavaScript实现获取select下拉框中第一个值的方法
2018/02/06 Javascript
MVVM 双向绑定的实现代码
2018/06/21 Javascript
javascript实现计算指定范围内的质数示例
2018/12/29 Javascript
el-table表头根据内容自适应完美解决表头错位和固定列错位
2021/01/07 Javascript
[03:12]2016完美“圣”典风云人物:单车专访
2016/12/02 DOTA
Python 开发Activex组件方法
2009/11/08 Python
Python爬取网易云音乐热门评论
2017/03/31 Python
Python matplotlib画图实例之绘制拥有彩条的图表
2017/12/28 Python
Python自定义一个异常类的方法
2019/06/27 Python
如何在VSCode上轻松舒适的配置Python的方法步骤
2019/10/28 Python
django-crontab实现服务端的定时任务的示例代码
2020/02/17 Python
PyQt5高级界面控件之QTableWidget的具体使用方法
2020/02/23 Python
python opencv 实现读取、显示、写入图像的方法
2020/06/08 Python
浅谈keras使用预训练模型vgg16分类,损失和准确度不变
2020/07/02 Python
亚洲最大的眼镜批发商和零售商之一:Glasseslit
2018/10/08 全球购物
下述程序的作用是计算机数组中的最大元素值及其下标
2012/11/26 面试题
MYSQL基础面试题
2012/05/13 面试题
社区庆八一活动方案
2014/02/02 职场文书
房产代理公证处委托书
2014/04/04 职场文书
令人印象深刻的自荐信
2014/05/25 职场文书
反对四风自我剖析材料
2014/10/07 职场文书
2014年副班长工作总结
2014/12/10 职场文书
2014年中职班主任工作总结
2014/12/16 职场文书
学校教师师德师风承诺书
2015/04/28 职场文书
财产分割协议书
2016/03/22 职场文书