浅析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 animate制作绚丽的动画效果
Nov 24 HTML / CSS
用css3写出气球样式的示例代码
Sep 11 HTML / CSS
html5 application cache遇到的严重问题
Dec 26 HTML / CSS
HTML5 通信API 跨域门槛将不再高、数据推送也不再是梦
Apr 25 HTML / CSS
html标签之Object和EMBED标签详解
Jul 04 HTML / CSS
HTML5 Canvas旋转动画的2个代码例子(一个旋转的太极图效果)
Apr 10 HTML / CSS
HTML5新增的8类INPUT输入类型介绍
Jul 06 HTML / CSS
解析HTML5的存储功能和web SQL的相关操作方法
Feb 19 HTML / CSS
css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效
Apr 29 HTML / CSS
CSS 制作波浪效果的思路
May 18 HTML / CSS
如何在CSS中绘制曲线图形及展示动画
May 24 HTML / CSS
css实现左上角飘带效果的完整代码
Mar 18 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+xml实现在线英文词典之添加词条的方法
2015/01/23 PHP
php中mysql操作buffer用法详解
2015/03/19 PHP
php metaphone()函数的定义和用法
2016/05/15 PHP
用js判断浏览器是否是IE的比较好的办法
2007/05/08 Javascript
类似CSDN图片切换效果脚本
2009/09/17 Javascript
指定位置如果有图片显示图片,无图片显示广告的JS
2010/06/05 Javascript
给应用部分的js代码设定一个统一的入口
2014/06/15 Javascript
jQuery实现列表的全选功能
2015/03/18 Javascript
基于JavaScript实现弹出框效果
2016/02/19 Javascript
再谈javascript注入 黑客必备!
2016/09/14 Javascript
Node.js利用Net模块实现多人命令行聊天室的方法
2016/12/23 Javascript
jQuery编写设置和获取颜色的插件
2017/01/09 Javascript
动态加载css方法实现和深入解析
2017/01/18 Javascript
Angular2自定义分页组件
2017/04/19 Javascript
微信小程序request出现400的问题解决办法
2017/05/23 Javascript
Ionic3实现图片瀑布流布局
2017/08/09 Javascript
使用JS实现导航切换时高亮显示的示例讲解
2018/08/22 Javascript
vue中多路由表头吸顶实现的几种布局方式
2019/04/12 Javascript
Vue实现导航栏的显示开关控制
2019/11/01 Javascript
使用 Jest 和 Supertest 进行接口端点测试实例详解
2020/04/25 Javascript
[40:48]DOTA2上海特级锦标赛D组败者赛 Liquid VS COL第二局
2016/02/28 DOTA
Python简单调用MySQL存储过程并获得返回值的方法
2015/07/20 Python
Python3实现购物车功能
2018/04/18 Python
opencv实现简单人脸识别
2021/02/19 Python
介绍CSS3使用技巧5个
2009/04/02 HTML / CSS
利用HTML5画出一个坦克的形状具体实现代码
2013/06/20 HTML / CSS
会计出纳员的自我评价
2014/01/15 职场文书
2013年研究生毕业感言
2014/02/06 职场文书
学生安全教育材料
2014/02/14 职场文书
金融管理应届生求职信
2014/02/20 职场文书
关于爱国的演讲稿
2014/05/07 职场文书
电子商务专业自荐信
2014/06/02 职场文书
护理学专业求职信
2014/06/29 职场文书
2015年班组工作总结
2015/04/20 职场文书
2020年元旦祝福语录,总有适合你的
2019/12/31 职场文书
Python 数据可视化之Matplotlib详解
2021/11/02 Python