css3带阴影弹出窗口(CSS3解决移动页面上点击链接触发色块的问题)
类别:Web前端 浏览量:2484
时间:2022-01-15 01:53:17 css3带阴影弹出窗口
CSS3解决移动页面上点击链接触发色块的问题引子
前段时间做微信页面的时候,一行内容做了2个链接,点击一个标签的时候,整个颜色块会闪一下,影响美观。需求针对这种情况来问我,能否把这个一闪的颜色去掉。我当时就想,这个怎么去?那我也不好直接回绝她,好吧,我试试吧!经过研究,百度的很多a标签都是一闪一闪的,有颜色块,但是淘宝和京东的手机端就没有这种情况,这是如何做到的呢?
研究
通过研究他们的代码发现,在根属性中,他们设置了这样的一个属性-webkit-tap-highlight-color:rgba(0,0,0,0)。
下面解释一下什么是RGBA,RAG就是颜色值了,大家都知道,A就是Alpha的缩写,就是透明度的意思,多了一个透明度。那么这个
- -webkit-tap-highlight-color:rgba(0,0,0,0)
的含义就是颜色是黑色,透明度是0,看不到了。所以点击就没有效果了。
-webkit-tap-highlight-color是啥东东?
概述:
-webkit-tap-highlight-color 是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中。
当用户点击iOS的Safari浏览器中的链接或JavaScript的可点击的元素时,覆盖显示的高亮颜色。该属性可以只设置透明度。如果未设置透明度,iOS Safari使用默认的透明度。当透明度设为0,则会禁用此属性;当透明度设为1,元素在点击时不可见。
语法:
- -webkit-tap-highlight-color:color
默认值: inherit
适用于:链接元素比如新窗口打开,img元素比如保存图像等等
兼容性:
iOS 1.1.1及更高版本的Safari浏览器可用。大部分android手机也是支持的,只是显示效果有所不同。
应用
- <!DOCTYPE html>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>haorooms博客之 tap-highlight-color测试</title>
- <meta name="viewport" content="width=device-width maximum-scale=1, minimum-scale=1, user-scalable=no">
- <meta name="apple-mobile-web-app-capable" content="yes" />
- <style>
- *{padding:0;margin:20px;color: #000;}
- a{
- text-decoration: none;
- padding: 12px;
- background-color:#39a6df;
- border-radius: 10px;
- display: block;
- text-align: center;
- }
- a:link,a:visited,a:hover,a:active{
- color:#fff;
- text-decoration: none;
- }
- .no{
- -webkit-tap-highlight-color:rgba(0,0,0,0);
- }
- .hasRed{
- -webkit-tap-highlight-color:rgba(255,0,0,1);
- }
- </style>
- </head>
- <body>
- <p>默认<br><a href="javascript:void(0)">a标签</a></p>
- <p>无色块<br><a href="javascript:void(0)" class="no">a标签</a></p>
- <p>点击之后有红色块<br><a href="javascript:void(0)" class="hasRed">a标签</a></p>
- </body>
- </html>
您可能感兴趣
- css3过渡技巧视频(css3过渡_动力节点Java学院整理)
- css3表单怎么设置大小(CSS3美化表单控件全集)
- 简述css盒子模型的认识(CSS3弹性盒模型开发笔记一)
- css3 图片样式处理(CSS3实现漂亮的照片墙效果的简单实例推荐)
- css3网格布局图(详解CSS3 弹性布局快速入门)
- css3盒子布局(CSS3弹性伸缩布局之box布局)
- css3三维模型(CSS3系列之3D制作方法案例)
- css3弹性布局(CSS3弹性布局内容对齐justify-content属性使用详解)
- html5表单实例(使用HTML5和CSS3表单验证功能)
- css3语法结构(CSS3中的注音对齐属性ruby-align用法指南)
- css3自制像素细线(css3绘制百度的小度熊)
- css3伸缩布局及图解(利用CSS3实现自定义滚动条代码分享)
- css3 3d动画效果(CSS3实现任意图片lowpoly动画效果实例)
- css3动画平移代码(利用CSS3实现炫酷的飞机起飞动画)
- css3左右移动动画效果(CSS3鼠标悬浮过渡缩放效果)
- css3旋转立方体效果(利用CSS实现立方体360度旋转效果实例代码)
- 韩国泡菜做法(韩国泡菜的做法步骤)
- 泰国旅游攻略(泰国旅游攻略必去景点)
- 越难春卷(越难春卷皮怎么用)
- 休闲VS新古典 办公家居简约设计(办公家居简约设计)
- 15个新成 园 位置公布 深圳龙岗2022年共建花园建设又有大动作(15个新成园位置公布)
- 记者手记 书记带我去 巡街(记者手记书记带我去)
热门推荐
- html样式中css怎么设置行高(CSS设置HTML元素的高度与宽度的各种情况总结)
- javascript 自带格式化时间(JavaScript内置日期、时间格式化时间实例代码)
- 常用web服务器与简介(最流行的5大开源web服务器)
- html5中table属性(Html5之自定义属性data-,dataset)
- linux如何查看apache日志(限制 Apache日志文件大小的方法)
- net coredocker基础镜像(Docker 部署net5程序实现跨平台功能)
- iframe跨域获取标签(iframe跨域的几种常用方法)
- ubuntu安装php(在Ubuntu 18.04上安装PHP 7.3 7.2和7.0的方法)
- linux增加静态路由(Linux添加静态路由两种实现方法解析)
- 常见的数据库及数据库相关技术