CSS3 鲜为人知的属性-webkit-tap-highlight-color的理解

(一)-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标签都要加

时间: 2024-10-05 11:23:13

CSS3 鲜为人知的属性-webkit-tap-highlight-color的理解的相关文章

CSS3的新增属性及其用法

CSS3的新增属性及其用法 现如今,随着 Web2.0 技术的流行,之前的 CSS2 标准和相关技术似乎已经满足不了日益增长的开发需求:人们需要实现更加美观.用户体验更好的界面.CSS3,这个新一代的标准应运而生.为了满足现有的对于 Web UI 的开发需求,它提供了一系列强大的功能,如许多新的 CSS 属性(文字,布局,颜色等等),各种 CSS 特效,甚至还支持 CSS 动画.元素的变换.这些 CSS 新特性在现阶段可以说都是非常强大和完善的,您只需要加入几行简单的 CSS 代码便可以实现出一

css3的部分属性

1.阴影box-shadow:x轴偏移量 y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式] 注意:inset(内阴影) 可以写在参数的第一个或最后一个,其它位置是无效的实例 正值表示在对象的底部,负值表示在对象的顶部. .boxshadow-outset{ width:100px; height:100px; box-shadow:4px 4px 6px blue,4px 4px 6px red inset; } .boxshadow-inset{ width:100p

CSS3新增颜色属性

CSS颜色属性复习 color name 颜色英文名称命名(如red,blue,pink,white等) HEX方式 十六进制方式(#FF0000,#B9B9B9等) rgb方式 三原色配色方式(rgb(255,0,00)) 这几种方式都是常用到的颜色属性,本人使用较多的是HEX方式.CSS3中新增了几种颜色属性. CSS3新增颜色属性 1.RGBA模式 2.HSL模式 3.HSLA模式 1.RGBA模式 rgba在之前一遍博客中已经提及过,a表示的是透明度,取值范围为0~1,rgb分别是红绿蓝

CSS3新增文本属性详述

CSS文本属性复习 1.white-space:对象内空格的处理方式 2.direction:文本流的方向 3.unicode-bidi:用于同一个页面里存在从不同方向读进的文本显示.与direction属性一起使用 1.white-space:对象内空格的处理方式 nowrap 控制文本不换行 pre 空白会被浏览器保留 normal 默认状态 pre-line 合并空白 保留换行符 pre-wrap 保留空白 正常换行 nowrap经常配合text-overflow一起使用,使得超出部分显示

CSS盒子模型之CSS3可伸缩框属性(Flexible Box)

CSS盒子模型(下) 一.CSS3可伸缩框(Flexible Box) 可伸缩框属性(Flexible Box)是css3新添加的盒子模型属性,有人称之为弹性盒模型,它的出现打破了我们经常使用的浮动布局,实现垂直等高.水平均分.按比例划分等分布方式以及如何处理可用的空间.使该模型,可以很轻松的创建自适应浏览器窗口的流动布局或自适应字体大小的弹性布局.但是它有一定的局限性,在firefox.chrome这浏览器下需要使用它们的私有属性来定义:firefox(-moz).chrome(-webkit

css3的transition属性的使用

transition是将某个属性从一个属性值在指定的时间内平滑过渡到另一个属性值来实现动画效果.这个属性一般搭配:hover来使 下面看一个例子:鼠标放在div上,0.2s后将div元素的背景色用一秒的时间变成黄色,变化方式是linear 1 div{ background-color:red; transition:background-color 1s linear 0.2s;} 2 div:hover{ background-color:yellow;} <div>思思博士</di

css3 常用的属性

1.伪类选择符 Pseudo-Classes Selectors Selectors选择符 CSS Version版本 Description简介 E:link CSS1 设置超链接a在未被访问前的样式. E:visited CSS1 设置超链接a在其链接地址已被访问过时的样式. E:hover CSS1/2 设置元素在其鼠标悬停时的样式. E:active CSS1/2 设置元素在被用户激活(在鼠标点击与释放之间发生的事件)时的样式. E:focus CSS1/2 设置元素在成为输入焦点(该元

css2和CSS3的background属性简写

1.css2:background:background-color || url("") || no-repeat || scroll || 0 0;  css3:  background: url("") || 0 0/cover || no-repeat || scroll || border-box || content-box || black; CSS2中的Background属性: background: background-color || bac

css3的新属性background-clip认识

css3新增的background-clip属性主要是对背景图片进行裁切的作用:background-clip:border-box || padding-box || context-box 分别对边框,内边距,内容区域进行裁切,把多余的部分给裁切掉,有兼容性问题. 拿w3cplus的文章代码过来: /*Firefox3.6-*/ -moz-background-clip: border || padding; /*Webkit*/ -webkit-background-clip: borde