早期做项目都会遇到这种情况：移动端点击的时候会出现下图所示的蓝色高亮，有些设备出现的可能是黄色的。

上图所示的蓝色框就是点击div之后显示的框。

我在网上找了好多资料都说让给body设置样式，加了下面的代码：

html {
	-webkit-text-size-adjust: 100%
body{
	-webkit-tap-highlight-color: transparent;/*把高亮颜色设置为透明，也可以使用rgba的形式*/
但是，我发现我写了之后这个问题依然没解决。
 
一般情况下是textarea、input、select等表单控件在选中状态或者是获得焦点状态下默认会有outline。
 div默认情况下是不会有的，但是当div用来做点击的时候，就可能会出现蓝色框高亮。
 
而这个问题的关键其实就在于这个outline
 
于是我又在以上基础上添加了以下代码：
 
div:focus{
	outline: none;
ok，问题解决。
 outline：none 同样适用于超链接标签取消高亮
 
补充去掉其他标签点击时的高亮
 
1.取消a标签点击时的高亮
 
	-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
	-webkit-user-select: none;
	-moz-user-focus: none;
    -moz-user-select: none;
2.a标签中包含图片，即点击图片触发超链接时，去掉触发touchstart出现的灰色背景
 
a,a:hover,a:active,a:visited,a:link,a:focus{
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    -webkit-tap-highlight-color: transparent;
    outline:none;
    background: none;
    text-decoration: none;
3.去掉ios图片被选中的蓝色背景
 
img {
	-webkit-tap-highlight-color:rgba(0,0,0,0);
	-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
	-webkit-user-select: none;
	-moz-user-focus: none;
	-moz-user-select: none;
	user-select: none;
vue-mobile 是是基于 vue-cli 实现的移动端 H5 开发模板，其中已经搭建好基本的开发框架，可帮助您实现快速开发。 技术栈：vue + vux + axios + less
源码地址：https://github.com/Michael-lzg/vue-mobile
  搭建项目目录
  配置 css 预处理器
  配置 UI 组件库 vux
  解决移动端适配
  配置页面路由缓存
  axios 请求封装
  工具类函数封装
  toast 组件封装
  dialog 组件封装
  底部导航组件封装
  列表页 demo
  表单页 demo
  搭建项目目录
				
是否曾经有过这样的经历：把一个元素置于另一个元素之上，而希望下面的那个元素成为可点击的？现在，利用css的pointer-events属性即可做到。 CSS pointer-events Pointer-events原本来源于SVG，目前在很多浏览器中已经得到体现。不过，要让任何HTML元素生效还得借助于一点点css。该属性称之为pointer-events，基本上可以将它设置为auto，这是正常的行为，而“none”是一个有趣的属性。 将它应用到一个元素 如果你已经设置一个元素的css属性为pointer-events: none。它将不会捕获任何click事件，而是让事件穿过该元素到达下面
				
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
-webkit-user-select: none;
user-select:none;
-webkit-tap-highlight-color：当用户轻按一个链接或者JavaScript可点击元素时给元素覆盖一个高亮色，值为color，取消高亮可用tr...
在做网页的时候，我们会发现有些可点击按钮在点击时会出现高亮背景，很是难看
那么我们就可以用css将这去掉
-webkit-tap-highlight-color: transparent;
其实这个值不是将其去掉，而是将这块高亮变为了透明，全透明的就看不见了，也就不存在高亮区了，
这个属性全标签都可用，属于全局属性。
				
-moz-user-select:none;/*火狐*/
-webkit-user-select:none;/*webkit浏览器*/
-ms-user-select:none;/*IE10*/
-khtml-user-select:none;/*早期浏览器*/
user-select:none;
	<div class="frame-container">
<iframe class="demoFrame-3" frameborder="0" src="demo-3.html"></iframe><br>
<iframe class="demoFrame-4" frameborder="0" src="demo-4.html"></iframe>
</div>
a:focus,input:focus,p:focus,div:focus{ 
	-webkit-tap-highlight-color:rgba(0,0,0,0); 
	-webkit-user-modify:read-write-plaintext-only; 
				maven--Error executing Maven. 2 problems were encountered while building the effective settings
                    CSDN-Ada助手: 
                    非常感谢博主的分享，文章写得非常好，让我对JavaScript中关于时间的计算有了更深入的了解。博主的文字流畅易懂，举的例子也非常生动，让我可以更快地掌握知识点。希望博主能够继续创作更多优质的文章，分享更多有价值的知识。谢谢您的辛苦付出，期待更多精彩的内容！
为了方便博主创作，提高生产力，CSDN上线了AI写作助手功能，就在创作编辑器右侧哦～（https://mp.csdn.net/edit?utm_source=blog_comment_recall ）诚邀您来加入测评，到此（https://activity.csdn.net/creatActivity?id=10450&utm_source=blog_comment_recall）发布测评文章即可获得「话题勋章」，同时还有机会拿定制奖牌。
                JavaScript--AOS.js页面滚动动画插件
                    Fantasywt: 
                    一个页面由多个组件构成，使用aos时，只有一开始渲染的最上面几个在视口的组件有动画，滚动到下面的其他几个组件都没有展示动画，甚至元素直接消失是怎么回事呢
                CSS--rel=“stylesheet“
                    喝污昂･医啊･波音: 
                    springboot如果不加上rel="stylesheet" 的话样式会失效【不引用模板框架时】
                MySQL--Unknown table ‘achievement‘ in MULTI DELETE
                    modaciv: 
                    谢谢，讲清楚了
                JavaScript--Swiper双向控制
                    HElinHAO?: 
                    兄弟你解决了吗