浅析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气泡 css3关键帧动画创建的动态通知气泡
Feb 26 HTML / CSS
CSS3实现超酷的黑猫警长首页
Apr 26 HTML / CSS
利用css3画个同心圆示例代码
Jul 03 HTML / CSS
HTML5中的postMessage API基本使用教程
May 20 HTML / CSS
html5 touch事件实现触屏页面上下滑动(一)
Mar 10 HTML / CSS
localStorage 设置过期时间的方法实现
Dec 21 HTML / CSS
只要五步 就可以用HTML5/CSS3快速制作便签贴特效(图)
Jun 04 HTML / CSS
使用HTML5的表单验证的简单示例
Sep 09 HTML / CSS
记一次高分屏下canvas模糊问题
Feb 17 HTML / CSS
AmazeUI的下载配置与Helloworld的实现
Aug 19 HTML / CSS
CSS3 菱形拼图实现只旋转div 背景图片不旋转功能
Mar 30 HTML / CSS
html5实现点击弹出图片功能
Jul 16 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
《雄兵连》《烈阳天道》真的来了
2020/07/13 国漫
PHP获取用户的浏览器与操作系统信息的代码
2012/09/04 PHP
PHP图片处理之使用imagecopyresampled函数实现图片缩放例子
2014/11/19 PHP
使用Apache的rewrite
2021/03/09 Servers
BOOM vs RR BO5 第四场 2.14
2021/03/10 DOTA
兼容ie、firefox的图片自动缩放的css跟js代码分享
2012/01/21 Javascript
jquery二级导航内容均分的原理及实现
2013/08/13 Javascript
JavaScript使用HTML5的window.postMessage实现跨域通信例子
2014/04/11 Javascript
JavaScript中的DSL元编程介绍
2015/03/15 Javascript
jQuery height()、innerHeight()、outerHeight()函数的区别详解
2016/05/23 Javascript
微信小程序 获取设备信息 API实例详解
2016/10/02 Javascript
AngularJS中$apply方法和$watch方法用法总结
2016/12/13 Javascript
webpack打包js文件及部署的实现方法
2017/12/18 Javascript
Vue的H5页面唤起支付宝支付功能
2019/04/18 Javascript
Typescript 中的 interface 和 type 到底有什么区别详解
2019/06/18 Javascript
微信小程序开发之map地图组件定位并手动修改位置偏差
2019/08/17 Javascript
Python实现国外赌场热门游戏Craps(双骰子)
2015/03/31 Python
Python基于socket实现简单的即时通讯功能示例
2018/01/16 Python
python 正确保留多位小数的实例
2018/07/16 Python
浅谈Python在pycharm中的调试(debug)
2018/11/29 Python
python使用knn实现特征向量分类
2018/12/26 Python
python 二维数组90度旋转的方法
2019/01/28 Python
pyqt 多窗口之间的相互调用方法
2019/06/19 Python
Django Rest framework权限的详细用法
2019/07/25 Python
Python正则表达式学习小例子
2020/03/03 Python
Django 删除upload_to文件的步骤
2020/03/30 Python
Python virtualenv虚拟环境实现过程解析
2020/04/18 Python
使用python-Jenkins批量创建及修改jobs操作
2020/05/12 Python
python爬虫容易学吗
2020/06/02 Python
详解Python GUI编程之PyQt5入门到实战
2020/12/10 Python
华为旗下电子商务平台:华为商城
2016/08/06 全球购物
会计岗位职责范本
2014/03/07 职场文书
个人师德师风自我剖析材料
2014/09/29 职场文书
教师节晚会主持词
2015/06/30 职场文书
JavaScript实现淘宝商品图切换效果
2021/04/29 Javascript
python单向链表实例详解
2022/05/25 Python