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

来源：互联网发布：海尔美的工厂模式java 编辑：程序博客网时间：2024/04/28 15:26

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

今天偶然发现一件很奇怪的事儿。

在移动端，在我去掉css的伪类及其伪元素跟相关的js之后，

在我点击某块区域的时候，总有一个背景盖在上面，当初以为是Js搞得鬼，

后来发现却不以为然，原来是css的一个属性搞得鬼，希望可以帮到大家。

问题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>

0 0