浅析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开启硬件加速的使用和坑
Aug 21 HTML / CSS
CSS3制作酷炫的三维相册效果
Jul 01 HTML / CSS
css3media响应式布局实例
Jul 08 HTML / CSS
css3实现小箭头各种图形效果
Jul 08 HTML / CSS
详解HTML5表单新增属性
Dec 21 HTML / CSS
分享一个H5原生form表单的checkbox特效代码
Feb 26 HTML / CSS
基于html5绘制圆形多角图案
Apr 21 HTML / CSS
HTML5 LocalStorage 本地存储详细概括(多图)
Aug 18 HTML / CSS
HTML5响应式(自适应)网页设计的实现
Nov 17 HTML / CSS
html2canvas截图空白问题的解决
Mar 24 HTML / CSS
html5关于外链嵌入页面通信问题(postMessage解决跨域通信)
Jul 20 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实现文件上传二法
2006/10/09 PHP
PHP实现文件下载断点续传详解
2014/10/15 PHP
微信支付扫码支付php版
2016/07/22 PHP
CSDN轮换广告图片轮换效果
2007/03/27 Javascript
jQuery 方法大全方便学习参考
2010/02/25 Javascript
jQuery编写widget的一些技巧分享
2010/10/28 Javascript
jquery实现类似淘宝星星评分功能有截图
2014/09/15 Javascript
JavaScript Math.floor方法(对数值向下取整)
2015/01/09 Javascript
javascript内置对象操作详解
2015/02/04 Javascript
动态加载js的方法汇总
2015/02/13 Javascript
PageSwitch插件实现100种不同图片切换效果
2015/07/28 Javascript
跟我学习javascript的定时器
2015/11/19 Javascript
JavaScript中Object基础内部方法图
2018/02/05 Javascript
layui动态加载多表头的实例
2019/09/05 Javascript
开源Web应用框架Django图文教程
2017/03/09 Python
用Python3创建httpServer的简单方法
2018/06/04 Python
Python注释、分支结构、循环结构、伪“选择结构”用法实例分析
2020/01/09 Python
Nisbets法国:英国最大的厨房和餐饮设备供应商
2019/03/18 全球购物
巴西Mr. Cat在线商店:购买包包和鞋子
2019/09/08 全球购物
乌克兰鞋类购物网站:Eobuv.com.ua
2020/11/28 全球购物
学生自我鉴定范文
2013/10/04 职场文书
2014年父亲节活动方案
2014/03/06 职场文书
幼儿园小班评语
2014/04/18 职场文书
中学生英语演讲稿
2014/04/26 职场文书
信访工作经验交流材料
2014/05/23 职场文书
安全口号大全
2014/06/21 职场文书
国际商务专业毕业生自我鉴定2014
2014/09/27 职场文书
2014年党建工作总结
2014/11/11 职场文书
中标通知书范本
2015/04/17 职场文书
入党介绍人意见范文
2015/06/01 职场文书
《只有一个地球》教学反思
2016/02/16 职场文书
如何书写授权委托书?
2019/06/25 职场文书
python xlwt模块的使用解析
2021/04/13 Python
解决numpy数组互换两行及赋值的问题
2021/04/17 Python
拒绝盗图!教你怎么用python给图片加水印
2021/06/04 Python
Springboot如何同时装配两个相同类型数据库
2021/11/17 Java/Android