一些容易忽略的CSS3属性

1.-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).

 

2.text-size-adjust

//iPhone 和 Android 的浏览器纵向 (Portrate mode) 和橫向 (Landscape mode) 模式皆有自动调整字体大小的功能。控制它的就是 CSS 中的 -webkit-text-size-adjust。

text-size-adjust 设为 none 或者 100% 关闭字体大小自动调整功能.

 

3.outline：none

//input，textarea{outline:none}  取消chrome下默认的文本框聚焦样式,移动端不起作用。想要去除文本框的默认样式可以使用-webkit-appearance。

 

4. -webkit-appearance: none;  

//消除输入框和按钮的原生外观，在iOS上加上这个属性才能给按钮和输入框自定义样式 。   注意：不同type的input使用这个属性之后表现不一。text、button无样式，radio、checkbox直接消失

 

5.-webkit-user-select: none;

// 禁止页面文字选择 ，此属性不继承，一般加在body上规定整个body的文字都不会自动调整

 

6. -webkit-touch-callout:none;  

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

 

7.-webkit-appearance 和 -moz-appearance

//你曾经想过将一张图片伪装成单选按钮么？或者，一个输入框看起来像一个复选框？那么现在appearance 出现了。即便你并不想要让一个链接看起来总是像个按钮，下面这个例子也可以让你了解到，只要你愿意就可以做到的：a {-webkit-appearance: button;-moz-appearance: button;}

 

8.text-overflow

//采用CSS3和text-overflow: ellipsis，如果文字比它的容器的宽度要长的话，你就可以强制文字以”…”结束它。唯一的要求是设置overflow:hidden。

 

9.background-attachment

//当你为一个设置了overflow:auto的元素指定背景图片的时候，当内容太多而出现滚动条后，拖动滚动条就会发现背景图片的位置是固定的，而不是随着滚动条移动。如果你想要背景图片随着内容而滚动，可以设置background-attachment:local。