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


Posted in HTML / CSS onJanuary 12, 2017

-webkit-tap-highlight-color

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

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

-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

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

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

-webkit-user-select  

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

-webkit-touch-callout  

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

总结

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

HTML / CSS 相关文章推荐
css3制作动态进度条以及附加jQuery百分比数字显示
Dec 13 HTML / CSS
CSS3制作ajax loader icon实现思路及代码
Aug 25 HTML / CSS
一款纯css3实现的竖形二级导航的实例教程
Dec 11 HTML / CSS
CSS3 3D旋转rotate效果实例介绍
May 03 HTML / CSS
CSS3 实现footer 固定在底部(无论页面多高始终在底部)
Oct 15 HTML / CSS
css3 实现滚动条美化效果的实例代码
Jan 06 HTML / CSS
HTML5 Video/Audio播放本地文件示例介绍
Nov 18 HTML / CSS
HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等
May 08 HTML / CSS
HTML5手机端弹出遮罩菜单特效代码
Jan 27 HTML / CSS
HTML5 manifest离线缓存的示例代码
Aug 08 HTML / CSS
Canvas如何做个雪花屏版404的实现
Sep 25 HTML / CSS
CSS link与@import的区别和用法解析
May 07 HTML / CSS
CSS3,线性渐变(linear-gradient)的使用总结
Jan 09 #HTML / CSS
详解CSS3中nth-child与nth-of-type的区别
Jan 05 #HTML / CSS
CSS3打造百度贴吧的3D翻牌效果示例
Jan 04 #HTML / CSS
谈谈对css属性box-sizing的了解
Jan 04 #HTML / CSS
纯CSS3制作的鼠标悬停时边框旋转
Jan 03 #HTML / CSS
HTML5+CSS3网页加载进度条的实现,下载进度条的代码实例
Dec 30 #HTML / CSS
HTML5+CSS3实例 :canvas 模拟实现电子彩票刮刮乐代码
Dec 30 #HTML / CSS
You might like
PHP使用GIFEncoder类生成gif动态滚动字幕
2014/07/01 PHP
php去除头尾空格的2种方法
2015/03/16 PHP
PHP实现生成唯一会员卡号
2015/08/24 PHP
PHP+ajax实现二级联动菜单功能示例
2018/08/10 PHP
子窗体与父窗体传值示例js代码
2013/08/01 Javascript
jquery text(),val(),html()方法区别总结
2013/11/04 Javascript
jquery 模板的应用示例
2013/11/12 Javascript
使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享
2016/05/09 Javascript
AngularJs Managing Service Dependencies详解
2016/09/02 Javascript
原生javascript实现图片放大镜效果
2017/01/18 Javascript
聊聊JavaScript如何实现继承及特点
2017/04/07 Javascript
移动端手指放大缩小插件与js源码
2017/05/22 Javascript
Vue仿手机qq的实例代码(demo)
2017/09/08 Javascript
详解React中setState回调函数
2018/06/14 Javascript
详解react内联样式使用webpack将px转rem
2018/09/13 Javascript
详解ES6 Symbol 的用途
2018/10/14 Javascript
详解Vue2.0组件的继承与扩展
2018/11/23 Javascript
怎样在vue项目下添加ESLint的方法
2019/05/16 Javascript
vue动态路由:路由参数改变,视图不更新问题的解决
2019/11/05 Javascript
js实现自动播放匀速轮播图
2020/02/06 Javascript
python 写的一个爬虫程序源码
2016/02/28 Python
Python ldap实现登录实例代码
2016/09/30 Python
python实现批量图片格式转换
2020/06/16 Python
Django实现分页功能
2018/07/02 Python
python生成1行四列全2矩阵的方法
2018/08/04 Python
Python中如何使用if语句处理列表实例代码
2019/02/24 Python
用uWSGI和Nginx部署Flask项目的方法示例
2019/05/05 Python
python中的协程深入理解
2019/06/10 Python
关于阿里云oss获取sts凭证 app直传 python的实例
2019/08/20 Python
python应用文件读取与登录注册功能
2019/09/23 Python
Python如何使用bokeh包和geojson数据绘制地图
2020/03/21 Python
Python环境配置实现pip加速过程解析
2020/11/27 Python
大学生的创业计划书就该这么写
2014/01/30 职场文书
学校献爱心活动总结
2014/07/08 职场文书
乡镇平安建设汇报材料
2014/08/25 职场文书
教师学习党的群众路线教育实践活动心得体会
2014/10/31 职场文书