浅析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教程:边框属性border的极致应用
Apr 02 HTML / CSS
需要知道的CSS3动画技术
Jan 01 HTML / CSS
css3实现文字扫光渐变动画效果的示例
Nov 07 HTML / CSS
css3新单位vw、vh的使用教程
Mar 23 HTML / CSS
一篇文章带你学习CSS3图片边框
Nov 04 HTML / CSS
html5定位获取当前位置并在百度地图上显示
Aug 22 HTML / CSS
利用纯html5绘制出来的一款非常漂亮的时钟
Jan 04 HTML / CSS
使用HTML5在网页中嵌入音频和视频播放的基本方法
Feb 22 HTML / CSS
html5生成柱状图(条形图)效果的实例代码
Mar 25 HTML / CSS
html5 http的轮询和Websocket原理
Oct 19 HTML / CSS
详解h5页面在不同ios设备上的问题总结
Mar 01 HTML / CSS
使用CSS实现六边形的图片效果
Aug 05 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
正义联盟的终局之战《天启星战争》将成为DC动画宇宙的最后一部
2020/04/09 欧美动漫
综合图片计数器
2006/10/09 PHP
一个简单的域名注册情况查询程序
2006/10/09 PHP
有关PHP中MVC的开发经验分享
2012/05/17 PHP
简单实现限定phpmyadmin访问ip的方法
2013/03/05 PHP
使用JavaScript创建新样式表和新样式规则
2016/06/14 PHP
遍历指定目录,并存储目录内所有文件属性信息的php代码
2016/10/28 PHP
PHP用户注册邮件激活账户的实现代码
2017/05/31 PHP
PHP 加密 Password Hashing API基础知识点
2020/03/02 PHP
JS 获取span标签中的值的代码 支持ie与firefox
2009/08/24 Javascript
离开页面时检测表单元素是否被修改,提示保存的js代码
2010/08/25 Javascript
Javascript面向对象编程(二) 构造函数的继承
2011/08/28 Javascript
jquery中的mouseleave和mouseout的区别 模仿下拉框效果
2012/02/07 Javascript
ExtJS4如何给同一个formpanel不同的url
2014/05/02 Javascript
使用Node.js为其他程序编写扩展的基本方法
2015/06/23 Javascript
AngularJS基础 ng-disabled 指令详解及简单示例
2016/08/01 Javascript
对js eval()函数的一些见解
2016/08/15 Javascript
JavaScript 计算笛卡尔积实例详解
2016/12/02 Javascript
Bootstrap栅格系统使用方法及页面调整变形的解决方法
2017/03/10 Javascript
微信小程序之发送短信倒计时功能
2017/08/30 Javascript
JS实现的计数排序与基数排序算法示例
2017/12/04 Javascript
JavaScript调用模式与this关键字绑定的关系
2018/04/21 Javascript
解决element ui select下拉框不回显数据问题的解决
2019/02/20 Javascript
vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流)
2019/05/10 Javascript
微信小程序官方动态自定义底部tabBar的例子
2019/09/04 Javascript
layui 富文本编辑器和textarea值的相互传递方法
2019/09/18 Javascript
python中使用smtplib和email模块发送邮件实例
2014/04/22 Python
python 平衡二叉树实现代码示例
2018/07/07 Python
精油和天然健康美容产品:Art Naturals
2018/01/27 全球购物
2013年大学生的自我鉴定
2013/10/24 职场文书
班级寄语大全
2014/04/10 职场文书
产假请假条
2014/04/10 职场文书
法人代表任命书范本
2014/06/05 职场文书
学校捐款活动总结
2015/05/09 职场文书
开场白怎么写
2015/06/01 职场文书
爱国主义主题班会
2015/08/14 职场文书