（一）-webkit-tap-highlight-color

那个特性只用作iOS (iPhone和iPad)。当你点选两个镜像或是透过Javascript表述的可点选原素的此时候，它就会再次出现两个乳白色的棕色大背景。要重置那个整体表现，你能增设-webkit-tap-highlight-color为任何人色调。

想停止采用那个GT5516SBB，增设色调的alpha值为0方可。

实例：增设GT5516SBB色为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特性，但是大部分设计师和开发人员貌似依然在关注于许多很“主流”的特性，如border-radius、box-shadow或是transform等。它们有良好的文档、很好的测试并且最常用到，所以如果你最近在设计网站，你很难能脱离它们。

但是，隐藏在应用程序的大宝库中是许多高级的、被严重低估的特性，但是它们并没有得到太多的关注。或许它们中的许多应该这样(被无视)，但是其它的属性应该得到更多的认可。最伟大的财富隐藏在Webkit的下面，而且在iPhone、iPad和Android apps的时代，开始了解它们会灰常有用。就连Firefox等采用的Gecko引擎，也提供了许多独特的特性。在本文中，我们将看一下鲜为人知的CSS 2.1和CSS3特性以及它们在现代应用程序中的全力支持情况。

说明: 对于每个特性，我们这里规定：”WebKit” 即指代采用Webkit内核的应用程序(Safari、Chrome、iPhone、iPad、Android等)，”Gecko“指代采用Gecko内核的应用程序(Firefox等)。然后有的特性是官方CSS 2.1.规范的一部分，这意味着更多的浏览器甚至许多古老的应用程序也会全力支持它们。最后，两个CSS3的条码标明遵守那个标准，被最新的应用程序版本——比如Firefox 4、Chrome 10、Safari 5、Opera 11.10以及IE9全力支持的特性。

WebKit特有特性

-webkit-mask

那个特性是相当强大的，所以详细的介绍超出了本文的范畴，它非常值得深入研究，因为它能在实际应用中为你省掉很多时间。

-webkit-mask让为两个原素加进蒙板成为可能，从而你能创建任意形状的花样。蒙板能是CSS3渐变或是乳白色的PNG图片。蒙板原素的alpha值为0的此时候会覆盖下面的原素，为1的此时候会完全表明下面的内容。相关的特性有-webkit-mask-clip、 -webkit-mask-position 和-webkit-mask-repeat等，严重依赖来自于background中的语法。更多信息请查看webkit的博客和下面的链接。

实例

图片蒙板:

实例

渐变蒙板:

扩展阅读: Safari Developer Library

-webkit-text-stroke

CSS边框的两个不足就是多于矩形的原素就可以采用。-webkit-text-stroke能为文字加进边框。它不但能增设文字边框的宽度，也能增设其色调。而且，配合采用color: transparent特性，你还能创建镂空的手写体！

实例

为所有的

标题设定两个2px宽的蓝色边框:

另两个特性是，透过设定1px的透明化边框，能让文字变得平滑:

创建黄色镂空手写体：

h3 {

color: transparent;

-webkit-text-stroke: 4px red;

扩展阅读: Safari Developer Library

-webkit-nbsp-mode

换行有时是很棘手的事情：有时你希望文字在适当的地方断行(而不是折行)，有时你又不想这样。两个能控制那个的特性就是-webkit-nbsp-mode，它让你能改变&nbsp;空白符的行为，强制文字在它被用到的地方断行。透过增设值为space方可实现。

扩展阅读: Safari Developer Library

-webkit-tap-highlight-color

那个特性只用作iOS (iPhone和iPad)。当你点选两个镜像或是透过Javascript表述的可点选原素的此时候，它就会再次出现两个乳白色的棕色大背景。要重置那个整体表现，你能增设-webkit-tap-highlight-color为任何人色调。

想停止采用那个GT5516SBB，增设色调的alpha值为0方可。

实例

增设GT5516SBB色为50%透明化的黄色:

应用程序全力支持: 多于iOS(iPhone和iPad).

扩展阅读: Safari Developer Library

zoom: reset

通常来说，zoom是两个IE专用的特性。但是webkit也开始全力支持它了，而且采用值reset，webkit能实现不错的效果(有趣的是，IE不全力支持那个值)。它让你重置掉应用程序中正常的翻转行为——如果某个原素被声明了zoom:reset，网页上的其它原素在用户放大网页的此时候都会跟着放大。

注：只不过，我们常用来停止采用chrome强制手写体大小的此时候用到的-webkit-text-size-adjust:none;也是能实现类似的效果，相同的是，增设该特性的原素内的文字不会被放大/缩小，但是网页上的其它原素则会变化——神飞

扩展阅读: Safari Developer Library

-webkit-margin-collapse

那个特性属于限制级的，但是它还是非常值得关注。通常，两个相邻的原素的margin会折叠起来(collapse)。这意味着第两个原素的底部的边距和第二个原素的头部边距会被合并到一起。

最常见的例子就是两个相邻的<p>原素会共享他们的margin值。想控制那个整体表现，我们能采用-webkit-margin-collapse及其分拆后的-webkit-margin-top-collapse、-webkit-margin-bottom-collapse等特性。预设值是collapse，值separate则停止共享margin值，也就是说，第两个原素的底部边距和第二个原素的头部边距会正常叠加。

扩展阅读: Safari Developer Library

-webkit-box-reflect

你还记得几乎每个网站都把他们的网站logo或是头部的文字做成倒影的那个年代吗？谢天谢地，那个年代已经过去了，但是如果你要在许多按键、导航、或是其他UI原素上更好的采用那个技术，-webkit-box-reflect是更好的选择。

那个特性接受above、below、left和right四个关键词，它们增设倒影的方向，它们和两个增设原素和它的倒影建的距离的数字一起采用。同时，蒙板图片也是同样全力支持的(看上面的-webkit-mask部分，千万别搞混了哈)。倒影会自动生成并对布局没有影响。下面的原素只用了CSS，第二个按键用了-webkit-box-reflect特性。

实例

那个倒影会再次出现在它的父原素的下面并有5px的间距:

1

那个倒影会投射到原素的右边，没有间距。然后，两个蒙板将会被应用(url(mask.png)):

1

扩展阅读: Safari Developer Library

-webkit-marquee

另两个特性让我们回到美好的从前：那个遍地marquee(跑马灯)的年代。有趣的是那个已经被遗弃的条码反而在现在变的很有用，比如我们在比较小的手机屏幕上切换内容，如果不断行的话文字将不能完全表明。

ozPDA创建的那个天气的应用很好的采用了它。 (如果你木有看见变换的文字，能尝试换两个城市来体验。须要采用WebKit内核应用程序)

实例

.marquee {

white-space: nowrap;

overflow:-webkit-marquee;

width: 70px;

-webkit-marquee-direction: forwards;

-webkit-marquee-speed: slow;

-webkit-marquee-style: alternate;

要让marquee工作须要许多前提条件。首先，white-space必须增设为nowrap，这样就可以让文字不自动换行，其次，overflow必须增设为-webkit-marquee，宽度也要增设为比文字实际长度小的数值。

剩下的特性确保文字从左边滚动到右边(-webkit-marquee-direction)、来回终端(-webkit-marquee-style)以及以比较低的速度终端(-webkit-marquee-speed)。其它的特性有-webkit-marquee-repetition，用来表述marquee重复的次数，-webkit-marquee-increment, 表述每次递增的速度变化。

注：虽然HTML的marquee条码在XHTML中被抛弃了，但是各应用程序还是全力支持的，但是有两个问题就是，marquee标签可能会占用比较大的cpu，大猫对其进行了深入的研究，结论是marquee的速度不能太快，而webkit用-webkit-marquee特性是最好的——神飞。

扩展阅读: Safari Developer Library

Gecko特有特性

font-size-adjust

那个有用的CSS3特性目前多于Firefox全力支持。我们能用它来设定指定原素的文字大小(font-size)应该相对于小写字母的高度(x-height)而不是大写字母的高度(cap height)。比如，Verdana比同型号的Times手写体更清晰，它有着更矮的x-height。为的是弥补那个缺陷，我们能用font-size-adjust特性来纠正后者。

该特性在拥有相同的x-height的手写体上非常有用。即便你在小心的采用小号手写体，在问题再次出现时font-size-adjust也能提供解决方案。

实例

如果由于某种原因用户的电脑上没有安装Verdana，那么Arial就会被修正，从而和Verdana有相同的长宽比(0.58)。

p {

font-family:Verdana, Arial, sans-serif;

font-size: 12px;

font-size-adjust: 0.58;

应用程序全力支持: Gecko.

扩展阅读: Mozilla Developer Network

image-rendering

n年前，图片并不会被按照其原始大小表明，而是被设计师给翻转掉。取决于翻转的大小和上下文，图片可能会在应用程序中展现的不太好或是干脆就是错掉了的。现在，应用程序有了更好的算法来表明翻转的图片，不过，在你的图片被翻转后完全的控制其整体表现也是件很赞的事情。

如果你的图片有比较锐的线条并希望他们在翻转后保持它，那个Gecko私有特性就显得特别有用。相关的值是-moz-crisp-edges。同样的算法也用在optimizeSpeed，而auto 和optimizeQuality 表述为标准行为(用可行的最佳质量来翻转原素)。 image-rendering 特性同样能用作<video> 和<canvas>原素，和用作大背景图片一样。这是个CSS3 标准特性，但是目前多于Firefox全力支持。

值得特别注意的是，-ms-interpolation-mode: bicubic，尽管它是个IE专有特性。然而，它让Internet Explorer 7 在翻转图片后将其渲染为比较高的质量。由于那个应用程序预设处理的很烂，所以那个特性可能会很有用。

应用程序全力支持: Gecko.

扩展阅读: Mozilla Developer Network

-moz-border-top-colors

那个特性能归类为’养眼’。它让你能在border宽度大于1px的此时候为其增设相同的边框色调。当然-moz-border-bottom-colors, -moz-border-left-colors 和-moz-border-right-colors也是可用的。

不爽的是，没有两个简写的-moz-border-colors 缩写，所以每个边框都要分开增设。同时，border-width要和给到的色调的数量保持一致，否则，最后的那个色调值会填充到剩下的宽度。

实例

那个例子中，原素的左右两边边框会是标准的橙色，上下则有种类似渐变的色调——红黄蓝三色。

div {

border: 3px solid orange;

-moz-border-top-colors: red yellow blue;

-moz-border-bottom-colors: red yellow blue;

应用程序全力支持: Gecko.

扩展阅读: Mozilla Developer Network

混合特性

-webkit-user-select 和 -moz-user-select

或许你常常不希望用户在你的网站上选择文本，无论是否是出于版权的原因。通常大家会有js来实现，另两个方案就是，将-webkit-user-select 和-moz-user-select 的值设为none。

请谨慎采用那个特性kit和gecko全力支持。

应用程序全力支持: WebKit, Gecko.

扩展阅读: Safari Developer Library, Mozilla Developer Network

-webkit-appearance 和 -moz-appearance

你曾经想过将一张图片伪装成单选按键么？或是，两个快捷方式看起来像两个复选框？那么现在appearance 再次出现了。即便你并不想让两个镜像看起来总是像个按钮，下面那个例子也能让你了解到，只要你愿意就能做到的：

实例

a {

-webkit-appearance: button;

-moz-appearance: button;

应用程序全力支持: WebKit, Gecko.

扩展阅读: Safari Developer Library, Mozilla Developer Network, Mozilla Developer Network,CSS3 appearance简介

text-align: -moz-center/-webkit-center

这是两个特性（或是精确来说，是个“特性值”）的存在很让人惊喜啊。要让两个块级原素居中，大家通常将其增设为margin:0 auto。但是，现在你也能将原素的容器的text-align特性增设为-moz-center 和 -webkit-center。相应的，你也能透过增设-moz-left、-webkit-left或-moz-right、-webkit-right将原素居左或是居右。

应用程序全力支持: WebKit, Gecko.

扩展阅读: Safari Developer Library

CSS 2.1特性

counter-increment

你是否经常希望你能让两个有序列表或是一篇文章的所有标题自动编号？不幸的是，目前尚未有CSS3特性全力支持。但是在CSS 2.1中，counter-increment 提供了两个解决方案。这就意味着它已经再次出现好些年了，而且在IE8中就已经全力支持了。

配合:before 伪原素和content 特性，counter-increment能为所有的HTML条码加进自动的编号。即便是嵌套的编码也是全力支持的。

实例

要给标题编码，先将计算器重置一下:

下面的式样让每两个

标题都有两个”Section”的前缀，然后其后面的数字自动的递增1(这是预设的，能省略掉)，这里thecounter是计算器的名称:

.counter h1:before {

counter-increment: thecounter 1;

content:”Section”counter(thecounter)”:”;

实例

对于两个嵌套编码的列表，重置计数器，然后关掉

的自动编码，因为它是无嵌套的:

ol {

counter-reset: section;

list-style-type: none;

然后，每个

li:before {

counter-increment: section;

content: counters(section,”.”)””;

HTML代码：

应用程序全力支持: CSS 2.1.，所有的现代应用程序，IE 7+.

扩展阅读: W3C，CSS content, counter-increment 和 counter-reset简述

quotes

你会因为你的CMS不知道如何正确转换引用符号而纠结么？那么开始采用quotes特性吧。这样你就能自表述任何人符号了。然后你就能用:before和:after伪原素为任何人期望的原素指定引号了，悲催的是，webkit应用程序不全力支持那个特性——经测试，chrome 11已经开始全力支持那个特性了（之前的版本没有测试）。

实例

前面的两个符号决定第一级引用内容的引号，后面的两个用作二级引用，以此类推：

q {

quotes: « » “‹” “›”;

下面两行用作为选定原素指定引号:

q:before {content: open-quote}

这样，

This is a very nice quote.

应用程序全力支持: CSS 2.1.,除了WebKit，IE 7和IE6的所有现代应用程序。不过chrome是全力支持的。。。

扩展阅读: W3C

问题：要直接的加进符号，CSS文档必须要增设为UTF-8吗？这是两个很纠结的问题。遗憾的是，我不能给出两个明确的答案。我的经验是，不必要增设什么特定的字符集，然后utf-8字符集可能会出错，因为它表明错掉的字符(比如”»”)。而是用iso-8859-1 字符集，一切就都是正常的。

W3C这样描述：”由于上个例子中由’quotes’表述的引号方便的定位在电脑键盘上，高质量的字符则须要相同的10646字符集。”

你或许听说过但是没有记住的CSS3特性

接近尾声，让我们重温许多不太流行的以及不像border-radius和box-shadow那样被广泛需求的CSS3特性。

text-overflow

或许你会常常遇到那个问题：某个容器对于其内的文字来说太小了，然后你不得不用javascript来截断字符串并加进”…”符号以避免文字溢出。

忘掉它吧！采用CSS3和text-overflow: ellipsis，如果文字比它的容器的宽度要长的话，你就能强制文字以”…”结束它。唯一的要求是增设overflow:hidden。不幸的是，Firefox不全力支持那个特性，但是貌似在最近的版本中将会提供全力支持。

实例

div {

width: 100px;

text-overflow: ellipsis;

应用程序全力支持: CSS 3，所有应用程序的最新版本，除了Firefox，IE从IE6开始全力支持，据说Firefox到6.0也会提供全力支持的——希望如此吧。

扩展阅读: W3C

word-wrap

当文字在两个比较窄的容器中时，它的某个部分可能会因为太长而不能正确的换行。比如镜像就常常引起问题。如果你不想用overflow: hidden隐藏溢出的文字，那么你就能增设 word-wrap 为break-word，它能让字符串在到达容器的宽度限制时换行。

div {

width: 50px;

word-wrap: break-word;

应用程序全力支持: CSS 3，所有现代应用程序。

扩展阅读:W3C

resize

如果你在采用Firefox或Chrome，那么你肯定特别注意到了类型信息的右下角预设有个小的手柄，它能让你调整它们的大小。那个标准的行为由CSS3 特性 resize: both实现。

但是它并不仅限于textarea。它能用作所有的HTML原素。horizontal 和 vertical 值用作控制调整水平方向还是垂直方向。

请特别注意：对于display:block原素，如果设置了overflow:visible，resize特性将会无效(这一点原文描述不详——by 神飞)。

应用程序全力支持: CSS3, 除了Opera和IE以为的其它最新的应用程序。

扩展阅读: Safari Developer Library

background-attachment

当你为两个增设了overflow:auto的原素指定大背景图片的此时候，当内容太多而再次出现滚动条后，拖动滚动条就会发现大背景图片的位置是固定的，而不是随着滚动条终端。如果你想大背景图片随着内容而滚动，能增设background-attachment:local。

应用程序全力支持: CSS 3，除了Firefox以外的所有现代应用程序，Firefox是全力支持background-attachment特性的，只是不全力支持local值.

扩展阅读: W3C

text-rendering

随着越来越多的网站开始用@font-face来渲染文字，易读性开始被关注了。小号手写体上，文字会更容易再次出现。由于目前还没有CSS特性控制表明在线手写体的微妙细节，你能利用text-rendering来启用kerning 和 ligatures。

Gecko 和WebKit 浏览器处理那个特性的方式很各有相同样。前者预设启用那个特性，而后者，你须要将其增设为optimizeLegibility。

应用程序全力支持: CSS3, 所有WebKit 和Firefox应用程序.

扩展阅读: W3C

transform: rotateX/transform: rotateY

如果你已经开始采用CSS3，那么你可能会比较熟悉transform: rotate()，那个在z轴上旋转原素的特性。

但是你是否也知道，它也能更深入的旋转的(比如，围绕x轴和y轴)？ 这些变形结合-webkit-backface-visibility: hidden会更合适。

实例

如果你鼠标经过那个原素，它将会旋转180°，倒转过来:

div:hover {

transform: rotateY(180deg);

小技巧:如果只是映射两个原素，你能增设transform为rotateX(180deg) (对应rotateY)或者增设transform 为scaleX(-1) (对应scaleY).

应用程序全力支持: CSS3, WebKit、firefox、Opera以及IE9

扩展阅读: W3C，你须要知道的CSS3 动画技术

结语

正如你希望见到的，还有很多未知的很有用的特性。他们中的很多仍然处于试验性阶段并且可能一直这样甚至最终可能会被应用程序摈弃。而有些有望在后续版本中被所有的应用程序全力支持。

然而，很难判断判断他们中的许多是好是坏，WebKit特有的特性随着iOS和Android的成功显得越来越重要。当然，许多CSS3特性多多少少已经能采用了。

如果你不喜欢私有特性，你能将它们视为实验直到能在代码中实现以增强用户体验。同时，W3C的CSS validator 同样全力支持私有特性，它会返回警告而不是错误。

祝你体验快乐！