web app解决手机浏览器点击链接出现蓝色边框

        最近做web app项目时，经常出现一些链接在点击的时候会出现蓝色的边框，例如图片、链接等等，点击的时候都会有这种蓝色边框，出于项目需求要将其去掉，将蓝色边框改为手指触摸屏幕与手指离开屏幕做一个背景色的切换。

解决以上问题是用到一个比较偏门的CSS3属性:

-webkit-tap-highlight-color

       这个属性只用于webkit内核的浏览器(现在绝大多数手机浏览器都是webkit)。当你点击一个链接或者通过Javascript定义的可点击元素的时候，它就会出现一个半透明的灰色背景。要重设这个表现，你可以设置-webkit-tap-highlight-color为任何颜色。

想要禁用这个高亮，设置颜色的alpha值为0即可。

示例

设置高亮色为50%透明的红色:

-webkit-tap-highlight-color: rgba(255,0,0,0.5);

 

* { -webkit-tap-highlight-color: transparent }

将上面的CSS放入全局，就可以解决手机浏览器 点击链接出现蓝色虚线框。