浅析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 相关文章推荐
css 省略号 css3让多余的字符串消失并附加省略号的实现代码
Feb 07 HTML / CSS
纯css3实现图片翻牌特效
Mar 10 HTML / CSS
使用CSS3来实现滚动视差效果的教程
Aug 24 HTML / CSS
CSS3实现线性渐变用法示例代码详解
Aug 07 HTML / CSS
HTML5 Canvas如何实现纹理填充与描边(Fill And Stroke)
Jul 15 HTML / CSS
HTML5注册页面示例代码
Mar 27 HTML / CSS
Html5中localStorage存储JSON数据并读取JSON数据的实现方法
Feb 13 HTML / CSS
使用phonegap进行本地存储的实现方法
Mar 31 HTML / CSS
html5调用app分享功能示例(WebViewJavascriptBridge)
Mar 21 HTML / CSS
Html分层的box-shadow效果的示例代码
Mar 30 HTML / CSS
详解使用 CSS prefers-* 规范提升网站的可访问性与健壮性
May 25 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
php 深入理解strtotime函数的使用详解
2013/05/23 PHP
PHP解析目录路径的3个函数总结
2014/11/18 PHP
在openSUSE42.1下编译安装PHP7 的方法
2015/12/24 PHP
PHP实现简单实用的分页类代码
2016/04/08 PHP
用 javascript 实现的点击复制代码
2007/03/24 Javascript
javascript中的绑定与解绑函数应用示例
2013/06/24 Javascript
checkbox使用示例
2013/08/23 Javascript
javascript中this指向详解
2016/04/23 Javascript
jQuery插件扩展实例【添加回调函数】
2016/11/26 Javascript
百度地图API之百度地图退拽标记点获取经纬度的实现代码
2017/01/12 Javascript
JavaScript通过filereader接口读取文件
2017/05/10 Javascript
JS全角与半角转化实例(分享)
2017/07/04 Javascript
Koa项目搭建过程详细记录
2018/04/12 Javascript
微信小程序中网络请求缓存的解决方法
2019/12/29 Javascript
Vue 实现分页与输入框关键字筛选功能
2020/01/02 Javascript
jQuery开发仿QQ版音乐播放器
2020/07/10 jQuery
Python操作Excel之xlsx文件
2017/03/24 Python
通过源码分析Python中的切片赋值
2017/05/08 Python
Django rest framework工具包简单用法示例
2018/07/20 Python
python实现鸢尾花三种聚类算法(K-means,AGNES,DBScan)
2019/06/27 Python
解决pip install psycopg2出错问题
2020/07/09 Python
python 基于卡方值分箱算法的实现示例
2020/07/17 Python
沙龙级头发造型工具:FOXYBAE
2018/07/01 全球购物
blueseventy官网:铁人三项和比赛泳衣
2021/02/06 全球购物
介绍一下Linux文件的记录形式
2012/04/18 面试题
应届本科生推荐信范文
2013/12/25 职场文书
环境工程专业自荐信
2014/03/03 职场文书
学校教师安全责任书
2014/07/23 职场文书
超市优秀员工获奖感言
2014/08/15 职场文书
2014机关党员干部“正风肃纪”思想汇报
2014/09/15 职场文书
2014年教师党员自我评价范文
2014/09/22 职场文书
雷峰塔导游词
2015/02/09 职场文书
教师个人年度总结
2015/02/11 职场文书
初中历史教学反思
2016/02/19 职场文书
python中的被动信息搜集
2021/04/29 Python
Windows11插耳机没反应怎么办? win11耳机没声音的多种解决办法
2021/11/21 数码科技