浅析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 3D位移translate效果实例介绍
May 03 HTML / CSS
各大浏览器 CSS3 和 HTML5 兼容速查表 图文
Apr 01 HTML / CSS
css3 border-image使用说明
Jun 23 HTML / CSS
任意一块网页内容实现“活”的背景(目前火狐浏览器专有)
May 07 HTML / CSS
举例详解CSS3中的Transition
Jul 15 HTML / CSS
HTML5的结构和语义(5):内嵌媒体
Oct 17 HTML / CSS
HTML5 对各个标签的定义与规定:body的介绍
Jun 21 HTML / CSS
HTML5实现可缩放时钟代码
Aug 28 HTML / CSS
使用HTML5 Geolocation实现一个距离追踪器
Apr 09 HTML / CSS
VSCode 自定义html5模板的实现
Dec 05 HTML / CSS
使用CSS实现一个搜索引擎的原理解析
Sep 25 HTML / CSS
div与span之间的区别与使用介绍
Dec 06 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内存使用情况如何获取
2015/10/10 PHP
thinkPHP中验证码的简单使用方法
2015/12/26 PHP
php头像上传预览实例代码
2017/05/02 PHP
Laravel如何友好的修改.env配置文件详解
2017/06/07 PHP
PHP下载大文件失败并限制下载速度的实例代码
2019/05/10 PHP
用javascript实现的仿Flash广告图片轮换效果
2007/04/24 Javascript
JavaScript 学习笔记一些小技巧
2010/03/28 Javascript
jquery插件如何使用 jQuery操作Cookie插件使用介绍
2012/12/15 Javascript
window.open关于浏览器拦截问题分析及解决方法
2013/02/05 Javascript
IE和Firefox之间在JavaScript语法上的差异
2016/04/22 Javascript
ionic2打包android时gradle无法下载的解决方法
2017/04/05 Javascript
ionic2屏幕适配实现适配手机、平板等设备的示例代码
2017/08/11 Javascript
vue配置请求本地json数据的方法
2018/04/11 Javascript
浅谈在Vue.js中如何实现时间转换指令
2019/01/06 Javascript
JS使用正则表达式实现常用的表单验证功能分析
2020/04/30 Javascript
使用 UniApp 实现小程序的微信登录功能
2020/06/09 Javascript
详解Python Socket网络编程
2016/01/05 Python
Python简单生成随机数的方法示例
2018/03/31 Python
Python向Excel中插入图片的简单实现方法
2018/04/24 Python
解决DataFrame排序sort的问题
2018/06/07 Python
python挖矿算力测试程序详解
2019/07/03 Python
Python 在局部变量域中执行代码
2020/08/07 Python
中专生毕业自我鉴定
2013/11/01 职场文书
美工的岗位职责
2013/11/14 职场文书
家庭教育先进个人事迹材料
2014/01/24 职场文书
市场营销管理制度
2014/01/29 职场文书
《鱼游到了纸上》教学反思
2014/02/20 职场文书
网管求职信
2014/03/03 职场文书
《窗前的气球》教学反思
2014/04/07 职场文书
房地产销售经理岗位职责
2015/02/02 职场文书
清明扫墓感想
2015/08/11 职场文书
初中英语教学反思范文
2016/02/15 职场文书
端午节将至,用Python爬取粽子数据并可视化,看看网友喜欢哪种粽子吧!
2021/06/11 Python
TypeScript中条件类型精读与实践记录
2021/10/05 Javascript
Java 在线考试云平台的实现
2021/11/23 Java/Android
Python线程池与GIL全局锁实现抽奖小案例
2022/04/13 Python