<i id='CPp4L'><tr id='CPp4L'><dt id='CPp4L'><q id='CPp4L'><span id='CPp4L'><b id='CPp4L'><form id='CPp4L'><ins id='CPp4L'></ins><ul id='CPp4L'></ul><sub id='CPp4L'></sub></form><legend id='CPp4L'></legend><bdo id='CPp4L'><pre id='CPp4L'><center id='CPp4L'></center></pre></bdo></b><th id='CPp4L'></th></span></q></dt></tr></i><div id='CPp4L'><tfoot id='CPp4L'></tfoot><dl id='CPp4L'><fieldset id='CPp4L'></fieldset></dl></div>
  • <small id='CPp4L'></small><noframes id='CPp4L'>

    <legend id='CPp4L'><style id='CPp4L'><dir id='CPp4L'><q id='CPp4L'></q></dir></style></legend>

      1. <tfoot id='CPp4L'></tfoot>
          <bdo id='CPp4L'></bdo><ul id='CPp4L'></ul>

        浅析CSS3中鲜为人知的属性:-webkit-tap-highlight-color

        时间:2023-12-14
          <bdo id='Sa6WS'></bdo><ul id='Sa6WS'></ul>

          <small id='Sa6WS'></small><noframes id='Sa6WS'>

          <tfoot id='Sa6WS'></tfoot>

              <i id='Sa6WS'><tr id='Sa6WS'><dt id='Sa6WS'><q id='Sa6WS'><span id='Sa6WS'><b id='Sa6WS'><form id='Sa6WS'><ins id='Sa6WS'></ins><ul id='Sa6WS'></ul><sub id='Sa6WS'></sub></form><legend id='Sa6WS'></legend><bdo id='Sa6WS'><pre id='Sa6WS'><center id='Sa6WS'></center></pre></bdo></b><th id='Sa6WS'></th></span></q></dt></tr></i><div id='Sa6WS'><tfoot id='Sa6WS'></tfoot><dl id='Sa6WS'><fieldset id='Sa6WS'></fieldset></dl></div>
              <legend id='Sa6WS'><style id='Sa6WS'><dir id='Sa6WS'><q id='Sa6WS'></q></dir></style></legend>
                  <tbody id='Sa6WS'></tbody>

                  浅析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事件的默认样式,以及自定义点击事件时的高亮颜色,当网页在移动端或是需要支持触摸的情况下使用时,该属性可以大幅提高用户体验。

                  上一篇:使用Loader.css和css-spinners来制作加载动画的方法 下一篇:css sprites技术将多个背景集成到一个png图片上css定位

                  相关文章

                  <i id='lj29s'><tr id='lj29s'><dt id='lj29s'><q id='lj29s'><span id='lj29s'><b id='lj29s'><form id='lj29s'><ins id='lj29s'></ins><ul id='lj29s'></ul><sub id='lj29s'></sub></form><legend id='lj29s'></legend><bdo id='lj29s'><pre id='lj29s'><center id='lj29s'></center></pre></bdo></b><th id='lj29s'></th></span></q></dt></tr></i><div id='lj29s'><tfoot id='lj29s'></tfoot><dl id='lj29s'><fieldset id='lj29s'></fieldset></dl></div>

                  <legend id='lj29s'><style id='lj29s'><dir id='lj29s'><q id='lj29s'></q></dir></style></legend>

                      <bdo id='lj29s'></bdo><ul id='lj29s'></ul>

                    <small id='lj29s'></small><noframes id='lj29s'>

                    1. <tfoot id='lj29s'></tfoot>