浅析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事件的默认样式，以及自定义点击事件时的高亮颜色，当网页在移动端或是需要支持触摸的情况下使用时，该属性可以大幅提高用户体验。
本站部分内容来源互联网,如果有图片或者内容侵犯了您的权益，请联系我们，我们会在确认后第一时间进行删除！