浅析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 相关文章推荐
学做Bootstrap的第一个页面
May 15 HTML / CSS
玩转CSS3色彩
Jan 16 HTML / CSS
纯CSS改变webkit内核浏览器的滚动条样式
Apr 17 HTML / CSS
CSS3之transition实现下划线的示例代码
May 30 HTML / CSS
CSS3实现文本垂直排列的方法
Jul 10 HTML / CSS
基于HTML5 Canvas 实现商场监控实例详解
Nov 20 HTML / CSS
html Table 表头固定的实现
Jan 22 HTML / CSS
HTML 5 input placeholder 属性如何完美兼任ie
May 12 HTML / CSS
Application Cache未缓存文件无法访问无法加载问题
May 31 HTML / CSS
HTML5声音录制/播放功能的实现代码
May 03 HTML / CSS
HTML5 Canvas 实现K线图的示例代码
Dec 23 HTML / CSS
Html5基于canvas实现电子签名并生成PDF文档
Dec 07 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 数组遍历方法大全(foreach,list,each)
2010/06/30 PHP
PHP 杂谈《重构-改善既有代码的设计》之五 简化函数调用
2012/05/07 PHP
怎么在Windows系统中搭建php环境
2013/08/31 PHP
php获取一定范围内取N个不重复的随机数
2016/05/28 PHP
php实现的中秋博饼游戏之绘制骰子图案功能示例
2017/11/06 PHP
Django中通过定时任务触发页面静态化的处理方式
2018/08/29 PHP
PHP实现断点续传乱序合并文件的方法
2018/09/06 PHP
基于jquery的放大镜效果
2012/05/30 Javascript
Extjs grid添加一个图片状态或者按钮的方法
2014/04/03 Javascript
学习JavaScript设计模式(链式调用)
2015/11/26 Javascript
javascript从作用域链谈闭包
2020/07/29 Javascript
js实现文字滚动效果
2016/03/03 Javascript
a标签跳转到指定div,jquery添加和移除class属性的实现方法
2016/10/10 Javascript
Javascript 高性能之递归,迭代,查表法详解及实例
2017/01/08 Javascript
JavaScript严格模式详解
2017/01/16 Javascript
详解用node.js实现简单的反向代理
2017/06/26 Javascript
AngularJS中控制器函数的定义与使用方法示例
2017/10/10 Javascript
NVM安装nodejs的方法实用步骤
2019/01/16 NodeJs
Vuex中实现数据状态查询与更改
2019/11/08 Javascript
vue 返回上一页,页面样式错乱的解决
2019/11/14 Javascript
js实现旋转木马轮播图效果
2020/01/10 Javascript
Vue性能优化的方法
2020/07/30 Javascript
python中关于日期时间处理的问答集锦
2013/03/08 Python
python不带重复的全排列代码
2013/08/13 Python
python基础教程之udp端口扫描
2014/02/10 Python
python重试装饰器示例
2014/02/11 Python
python bottle框架支持jquery ajax的RESTful风格的PUT和DELETE方法
2017/05/24 Python
Python编程使用*解包和itertools.product()求笛卡尔积的方法
2017/12/18 Python
某/etc/fstab文件中的某行如下: /dev/had5 /mnt/dosdata msdos defaults,usrquota 1 2 请解释其含义
2013/09/18 面试题
后勤人员自我评价怎么写
2013/09/19 职场文书
初一学生期末评语
2014/04/24 职场文书
股票投资建议书
2014/05/19 职场文书
关于青春的演讲稿800字
2014/08/22 职场文书
舌尖上的中国观后感
2015/06/02 职场文书
Python djanjo之csrf防跨站攻击实验过程
2021/05/14 Python
Python+Matplotlib+LaTeX玩转数学公式
2022/02/24 Python