(一)-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 鲜为人知的属性-webkit-tap-highlight-color的理解的更多相关文章

  1. 有效的PhoneGap CSS: WebKit Tap Highlight Color

    原文链接:文章1:http://phonegap-tips.com/articles/essential-phonegap-css-webkit-tap-highlight-color.html(此文 ...

  2. 巧用 CSS3 filter(滤镜) 属性

    原文链接:CSS3 filter(滤镜) 属性 效果预览 filter: grayscale(100%); 定义和使用 filter 属性定义了元素(通常是<img>)的可视效果(例如:模 ...

  3. CSS3利用text-shadow属性实现多种效果的文字样式展现

    一.效过图展示: 已经是比较久之前学习的文字效果了.但是还是很实用很有趣的.利用CSS3提供的text-shadow属性可以给页面上的文字添加阴影效果,因此可以替换掉之前使用过的一些繁琐的图片.到目前 ...

  4. CSS3中动画属性transform、transition 和 animation

    CSS3中和动画有关的属性有三个 transform.transition 和 animation.下面来一一说明:        transform   从字面来看transform的释义为改变,使 ...

  5. css2和CSS3的background属性简写

    1.css2:background:background-color || url("") || no-repeat || scroll || 0 0;  css3:  backg ...

  6. CSS盒子模型之CSS3可伸缩框属性(Flexible Box)

    CSS盒子模型(下) 一.CSS3可伸缩框(Flexible Box) 可伸缩框属性(Flexible Box)是css3新添加的盒子模型属性,有人称之为弹性盒模型,它的出现打破了我们经常使用的浮动布 ...

  7. 利用css3的text-shadow属性实现文字阴影乳白效果

    现在CSS3+html5的网页应用的越来越广泛了.很多网页中的字体同样可以用CSS3来实现炫酷的效果. 下面就介绍一下利用css3的text-shadow属性实现文字阴影乳白效果.这是在设计达人上面看 ...

  8. css3的clip-path属性

    css3的clip-path属性 网上看到的都是因为2年前一个出名的网站引发了对该属性的研究.所以大概是2年前火了一阵子的属性.2016-09-10  23:54:00 直接开始总结它的用法: 2个基 ...

  9. CSS背景和CSS3背景background属性

    css背景属性用于定义HTML元素的背景 背景属性既可以为单个的单元设置背景,也可以为整个页面设置背景,可以对上述二者的任意组合设置背景,段落.文字.不同状态的链接.图像.内容区域修改其背景样式.设置 ...

随机推荐

  1. OpenStack实践系列⑧可视化服务Horizon之Dashboard演示

    OpenStack实践系列⑧可视化服务Horizon之Dashboard演示 七.可视化服务Horizon之Dashboard演示 仪表板依赖于功能核心服务,包括身份,图像服务,计算和网络两种(neu ...

  2. hibernate映射关系(多对多)

    Student与Teacher关系多对多(只建了2个实体类) public class Student { private int id; private String name; private S ...

  3. 讨论HTTP POST 提交数据的几种方式

    转自:http://www.cnblogs.com/softidea/p/5745369.html HTTP/1.1 协议规定的 HTTP 请求方法有 OPTIONS.GET.HEAD.POST.PU ...

  4. .NET基础之构造函数

    1.构造函数: 分为实例构造函数.静态构造函数.私有构造函数. 使用new表达式创建某个类的对象时, 1.1实例构造函数: (1)构造函数的名字与类名相同: (2)使用new表达式创建类的对象或者结构 ...

  5. Spring动态数据源实现读写分离

    一.创建基于ThreadLocal的动态数据源容器,保证数据源的线程安全性 package com.bounter.mybatis.extension; /** * 基于ThreadLocal实现的动 ...

  6. bootstrap栅格系统中同行div高度不一致的解决方法

    通过div底部的margin和padding实现,缺点:下边框无法完整显示,建议在无边框情况下使用 .row{ overflow: hidden; } [class*="col-" ...

  7. Python-socketserver实现并发- 源码分析

    基于tcp的套接字,关键就是两个循环, 一个链接循环,一个通信循环 socketserver模块中分两大类: server类(解决链接问题)和request类(解决通信问题) server类: req ...

  8. Confluence 6 管理 Atlassian 提供的 App

    Confluence 用户可以使用桌面应用来编辑一个已经上传到 Confluence 的文件,然后这个文件自动保存回 Confluence. 这个下载和上传的过程是通过 Atlassian Compa ...

  9. 新版Go2Shell 安装详解

    Go2Shell 下载地址 https://zipzapmac.com/Go2Shell 安装说明 1,首先下载好程序,然后运行到下面界面 2 然后将程序拖到下面位置 3,然后执行install Go ...

  10. npm install Install error: Unexpected token < in JSON at position 35问题解决

    解决方案 rm package-lock.json worked.