浅析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 相关文章推荐
分享8款纯CSS3实现的搜索框功能
Sep 14 HTML / CSS
css3与html5实现响应式导航菜单(导航栏)效果分享
Feb 12 HTML / CSS
纯css3实现的竖形无限级导航
Dec 10 HTML / CSS
CSS3实现自定义Checkbox特效实例代码
Apr 24 HTML / CSS
CSS3下的渐变文字效果实现示例
Mar 02 HTML / CSS
使用HTML5捕捉音频与视频信息概述及实例
Aug 22 HTML / CSS
如何使用localstorage代替cookie实现跨域共享数据问题
Apr 18 HTML / CSS
使用html2canvas实现浏览器截图的示例代码
Jan 26 HTML / CSS
html5 音乐播放器 audio 标签使用概述
Jul 15 HTML / CSS
Html5新特性用canvas标签画多条直线附效果截图
Jun 30 HTML / CSS
canvas 基础之图像处理的使用
Apr 10 HTML / CSS
CSS 鼠标点击拖拽效果的实现代码
Dec 24 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中的字符串函数
2006/10/09 PHP
php把session写入数据库示例
2014/02/26 PHP
Yii使用Captcha验证码的方法
2015/12/28 PHP
PHP实现的进度条效果详解
2016/05/03 PHP
php中实现进程锁与多进程的方法
2016/09/18 PHP
jQuery入门知识简介
2010/03/04 Javascript
JQuery入门—编写一个简单的JQuery应用案例
2013/01/03 Javascript
JS 修改URL参数(实现代码)
2013/07/08 Javascript
使用POST方式弹出窗口的两种方法示例介绍
2014/01/29 Javascript
jQuery中:not选择器用法实例
2014/12/30 Javascript
JavaScript插件化开发教程 (一)
2015/01/27 Javascript
JS实现简单的图书馆享元模式实例
2015/06/30 Javascript
JavaScript中的call方法和apply方法使用对比
2015/08/12 Javascript
JavaScript统计网站访问次数的实现代码
2015/11/18 Javascript
javascript html5实现表单验证
2016/03/01 Javascript
JavaScript数据结构之优先队列与循环队列实例详解
2017/10/27 Javascript
使用vue根据状态添加列表数据和删除列表数据的实例
2018/09/29 Javascript
js实现车辆管理系统
2020/08/26 Javascript
[47:20]DAC2018 4.4 淘汰赛 Optic vs Mineski 第一场
2018/04/05 DOTA
Python中的匿名函数使用简介
2015/04/27 Python
python中range()与xrange()用法分析
2016/09/21 Python
详解Pytorch 使用Pytorch拟合多项式(多项式回归)
2018/05/24 Python
django和vue实现数据交互的方法
2019/08/21 Python
如何通过python实现全排列
2020/02/11 Python
Pytorch 解决自定义子Module .cuda() tensor失败的问题
2020/06/23 Python
Python Pivot table透视表使用方法解析
2020/09/11 Python
德国古洛迷亚百货官网:GALERIA Kaufhof
2017/06/20 全球购物
巴西购物网站:Submarino
2020/01/19 全球购物
奥地利婴儿用品和玩具购物网站:baby-markt.at
2020/01/26 全球购物
什么是ESB?请介绍一下ESB?
2015/05/27 面试题
质量工程师岗位职责
2013/11/16 职场文书
秦兵马俑教学反思
2014/02/07 职场文书
幼儿园春季开学寄语
2014/04/03 职场文书
初中军训感想
2015/08/07 职场文书
Python趣味挑战之给幼儿园弟弟生成1000道算术题
2021/05/28 Python
对讲机知识
2022/04/07 无线电