浅析CSS3中鲜为人知的属性：-webkit-tap-highlight-color

介绍

在移动端网页开发中，我们经常会遇到点击某个元素后出现一个蓝色的透明遮罩层的情况，这个遮罩层有时会影响用户体验，而这个遮罩层的出现就是因为iOS默认的click事件的样式。为了解决这个问题，css3提供了一个-webkit-tap-highlight-color属性，可以用来去除click事件的默认样式。

使用方法

该属性可以设置为transparent或任意十六进制颜色值，表示点击事件时的高亮颜色。在css中的使用代码如下：

  a {
    -webkit-tap-highlight-color: transparent;
  }

示例1

为了更好的理解该属性的使用方法，以下为示例代码，当点击a标签时，设置其边框颜色为红色，高亮颜色为绿色，可以看到，当点击标签时，边框为红色，没有高亮颜色出现：

  <a href="#" style="border:1px solid black;-webkit-tap-highlight-color: green;" onclick="this.style.borderColor='red'">Click me</a>

示例2

还可以通过-webkit-tap-highlight-color设置点击按钮的高亮颜色，去除点击背景颜色，并使按钮有点击效果，示例代码如下所示：

  button {
    background-color: transparent;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  }

  button:active {
    background-color: #BBB;
    border: 1px solid #999;
  }

以上代码可以使按钮在被点击时，有一个浅灰色的背景，有一个1像素宽的灰色边框，并且没有高亮颜色出现。

总结

-webkit-tap-highlight-color是一个很有用却不为人知的css3属性，可以去掉click事件的默认样式，以及自定义点击事件时的高亮颜色，当网页在移动端或是需要支持触摸的情况下使用时，该属性可以大幅提高用户体验。