您的位置：首页 > 移动开发

移动端点击阴影如何去除？

2018-02-27 18:34 344 查看

移动端，点击之后某个区域后有阴影

问题1：

如图所示，我所遇到的状况：

问题2：去掉点击区域的边框阴影效果

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<style type="text/css">

div {
/*关键代码*/
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.btn-blue {
display: block;
height: 42px;
line-height: 42px;
text-align: center;
border-radius: 4px;
font-size: 18px;
color: #FFFFFF;
background-color: blue;
}

.btn-blue-on {
background-color: red;
}
</style>
</head>

<body>

<div class="btn-blue">按钮</div>

<script type="text/javascript">
var btnBlue = document.querySelector(".btn-blue");
btnBlue.ontouchstart = function() {
this.className = "btn-blue btn-blue-on"
}
btnBlue.ontouchend = function() {
this.className = "btn-blue"
}

btnBlue.onclick = function(){
alert(123)
}
</script>
</body>

</html>
-webkit的意思是：IOS浏览器；-tap的意思是：点击；-highlight的意思是：背景高亮；-color的意思是：颜色rgba(0,0,0,0) = transparent这两个是一个意思，就是纯黑透明；
总结：
1.css cursor：pointer影响啦 去掉
2.
* {-webkit-tap-highlight-color: transparent;}

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航