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

  发布时间:2017-01-12 15:19:57   作者:天--安静   我要评论
CSS中的-webkit-tap-highlight-color属性,简单来说功能就是手机端点击时的背景色设置,下面这篇文章主要介绍了CSS3中这个鲜为人知的属性:-webkit-tap-highlight-color的相关资料,需要的朋友可以参考借鉴,下面来一起看看吧。

GPT4.0+Midjourney绘画+国内大模型 会员永久免费使用!
如果你想靠AI翻身,你先需要一个靠谱的工具!

-webkit-tap-highlight-color

这个属性只用于iOS (iPhone和iPad)。当你点击一个链接或者通过Javascript定义的可点击元素的时候,它就会出现一个半透明的灰色背景。要重设这个表现,你可以设置-webkit-tap-highlight-color为任何颜色。
想要禁用这个高亮,设置颜色的alpha值为0即可。

示例:设置高亮色为50%透明的红色:

1
-webkit-tap-highlight-color: rgba(255,0,0,0.5);

浏览器支持: 只有iOS(iPhone和iPad).

css3中-webkit-text-size-adjust详解     

1、当样式表里font-size<12px时,中文版chrome浏览器里字体显示仍为12px,这时可以用 html{-webkit-text-size-adjust:none;}

2、-webkit-text-size-adjust放在body上会导致页面缩放失效

3、body会继承定义在html的样式

4、用-webkit-text-size-adjust不要定义成可继承的或全局的

outline:none

(1)在pc端为a标签定义这个样式的目的是为了取消ie浏览器下点击a标签时出现的虚线。ie7及以下浏览器还不识别此属性,需要在a标签上添加hidefocus="true"

(2)input,textarea{outline:none}  取消chrome下默认的文本框聚焦样式

(3)在移动端是不起作用的,想要去除文本框的默认样式可以使用-webkit-appearance,聚焦时候默认样式的取消是-webkit-tap-highlight-color。

看到一些移动端reset文件加了此属性,其实是多余。

webkit-appearance

1
-webkit-appearance: none;   //消除输入框和按钮的原生外观,在iOS上加上这个属性才能给按钮和输入框自定义样式 。

注意:不同type的input使用这个属性之后表现不一。text、button无样式,radio、checkbox直接消失

-webkit-user-select  

1
-webkit-user-select: none; // 禁止页面文字选择 ,此属性不继承,一般加在body上规定整个body的文字都不会自动调整

-webkit-touch-callout  

1
-webkit-touch-callout:none;  // 禁用长按页面时的弹出菜单(iOS下有效) ,img和a标签都要加

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家学习或者使用CSS3能有一定的帮助,如果有疑问大家可以留言交流。

蓄力AI

相关文章

  • CSS3中的元素过渡属性transition示例详解

    大家都知道过渡动画是动画的基础,在学习动画属性之前,我们需要先了解过渡属性transition,下面这篇文章通过示例代码给大家详细介绍了CSS3中的元素过渡属性transition,有
    2016-11-30
  • CSS3 box-sizing属性详解

    随着浏览器对HTML5及CSS3的支持,在移动端及自适应页面中CSS3.0发挥着很大优势,下面小编来给大家讲下CSS3.0的属性之box-sizing,感兴趣的朋友们可以参考借鉴,下面来一起
    2016-11-15
  • CSS3中动画属性transform、transition和animation属性的区别

    最近在项目中用到了CSS3中的动画属性。无奈对于css3几个新加的属性不太熟悉,常常容易搞混。所以从网站研究了点资料,总结一下,方便有需要的朋友们可以参考学习。
    2016-09-25
  • css3 盒模型以及box-sizing属性全面了解

    下面小编就为大家带来一篇css3 盒模型以及box-sizing属性全面了解。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-09-20
  • CSS3利用text-shadow属性实现多种效果的文字样式展现方法

    下面小编就为大家带来一篇CSS3利用text-shadow属性实现多种效果的文字样式展现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-25
  • CSS3文本阴影text-shadow属性详解

    下面小编就为大家带来一篇关于CSS3文本阴影text-shadow属性详解。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧,祝大家游戏愉快哦
    2016-08-08
  • 前端必须要掌握的几个CSS3的属性详解

    下面小编就为大家带来一篇前端必须要掌握的几个CSS3的属性详解。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-07-13
  • 详解CSS3中属性选择器新增加的特性

    CSS3的诸多革命性改进中,对属性选择器的增强绝对是亮点之一,这里我们就来详解CSS3中属性选择器新增加的特性,需要的朋友可以参考下
    2016-07-11
  • 使用CSS3滤镜的filter:blur属性制作毛玻璃模糊效果的方法

    CSS3的blur属性可以将图片加上模糊滤镜的效果,下面我们就来详细看一下使用CSS3滤镜的filter:blur属性制作毛玻璃模糊效果的方法,需要的朋友可以参考下
    2016-07-08
  • CSS3中Transform动画属性用法详解

    这篇文章主要为大家详细介绍了CSS3中Transform动画属性用法,教大家如何实现2D transform变换、3D transform变换,感兴趣的小伙伴们可以参考一下
    2016-07-04

最新评论