较好的文件格式、较好的试验因此最常见到，因此如果你前段时间在结构设计中文网站，你极难能瓦解它。
视)，但是其他的属 性应该得到更多的普遍认可。最了不起的社会财富暗藏在 Webkit 的上面，而且在 iPhone、iPad 和 Android apps 的黄金时代，开始介绍它会灰常因用。就连 Firefox 等选用的 Gecko 发动机，也提供了许多独有的特性。在责任编辑中，他们将看呵呵鲜为人知的 CSS 2.1 和 CSS3 特性和它在当代应用领域程序中的全力支持情况。
表明：对于每一特性，他们这里明确规定：WebKit即代指选用 Webkit Mach的应用领域程序（Safari、Chrome、iPhone、iPad、Android 等），Gecko代指选用 Gecko Mach的应用领域程序（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特性，你还能建立镂空的字体！
为所有的是 <h1> 标题设定两个 2px 宽的蓝色边框：
另两个特性是，通过设定 1px 的透明边框，能让文字变得平滑：
建立红色镂空字体：
扩展阅读：Safari Developer Library
-webkit-nbsp-mode
换行有时是很棘手的事情：有时你希望文字在适当的地方断行(而不是折行)，有时你又不想这样。两个能控制那个的特性就是-webkit-nbsp- mode，它让你能改变 空白符的行为，强制文字在它被用到的地方断行。通过设置值为space即可实现。
扩展阅读：Safari Developer Library
-webkit-tap-highlight-color
那个特性只用于iOS（iPhone 和 iPad）。当你点击两个链接或是通过Javascript定义的可点击原素的这时候，它就会出现两个乳白色的灰色背景。要重设那个表现，你能设置 -webkit-tap-highlight-color 为任何颜色。
想要禁用那个高亮，设置颜色的 alpha 值为0即可。
设置高亮色为 50% 透明的红色：
应用领域程序全力支持：只有 IOS
扩展阅读：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
se)。这意味著第两个原素的底部的边距和第二个原素的头部边距会被合并到一起。
最常见的例子就是两个相邻的<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的间距:
那个倒影会投射到原素的右边，没有间距。接着，两个蒙板将会被应用领域(url(mask.png)):
扩展阅读：Safari Developer Library
-webkit-marquee
另两个特性让他们回到美好的从前：那个遍地marquee(跑马灯)的年代。有趣的是那个已经被遗弃的条码反而在现在变的很有用，比如说他们在比较小的手机屏幕上切换文本，如果不断行的话文字将不能全然显示。
ozPDA建立的那个天气的应用领域较好的选用了它。 (如果你木有看到变换的文字，能尝试换两个城市来体验。需要选用WebKitMach应用领域程序)
要让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)。
应用领域程序全力支持：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要和给到的颜色的数量保持一致，否则，最后的那个颜色值会填充到剩下的宽度。
那个例子中，原素的左右两边边框会是国际标准的橙色，上下则有种类似蓝紫色的颜色——红黄蓝三色。
应用领域程序全力支持：Gecko.
扩展阅读：Mozilla Developer Network
混合特性
-webkit-user-select 和 -moz-user-select
或许你常常不希望用户在你的中文网站上选择文本，无论是否是出于版权的原因。通常大家会有js来实现，另两个方案就是，将-webkit-user-select 和-moz-user-select 的值设为none。
请谨慎选用那个特性：因为大部分用户是来查阅重要信息的，他们能复制并存储下来以备将来之用，因此这种方法既
应用领域程序全力支持：WebKit, Gecko.
扩展阅读：Safari Developer Library,Mozilla Developer Network
-webkit-appearance 和 -moz-appearance
你曾经想过将一张相片伪装成单选按钮么？或是，两个输入框看起来像两个复选框？那么现在appearance 出现了。即便你并不想要让两个链接看起来总是像个按钮，上面那个例子也能让你介绍到，只要你愿意就能做到的：
应用领域程序全力支持：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条码加进自动的编号。即便是嵌套的编码也是全力支持的。
要给标题编码，先将计算器重设呵呵:
上面的样式让每两个<h1>标题都有两个”Section”的前缀，接着其后面的数字自动的递增1(这是默认的，能省略掉)，这里thecounter是计算器的名称:
对于两个嵌套编码的列表，重结构设计数器，接着关掉<ol>的自动编码，因为它是无嵌套的:
接着，每一<li>设置为自动编号，分割符是两个点(.)，后面跟着两个空格
HTML 代码：
应用领域程序全力支持：CSS 2.1.，所有的是当代应用领域程序，IE 7+.
扩展阅读：W3C，CSS content, counter-increment 和 counter-reset详解
quotes
你会因为你的 CMS 不知道如何正确转换引用符号而纠结么？那么开始选用 quotes 特性吧。这样你就能自定义任何符号了。接着你就能 用 :before 和 :after 伪原素为任何期望的原素指定引号了，悲催的是，webkit 应用领域程序不全力支持那个特性 —— 经试验，chrome 11 已经开始全力支持那个特性了（之前的版没有试验）。
前面的两个符号决定第一级引用文本的引号，后面的两个用于二级引用，以此类推：
上面两行用于为选定原素指定引号:
这样
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 不全力支持那个特性，但是貌似在前段时间的版中将会提供全力支持。
应用领域程序全力支持：CSS3，所有应用领域程序的新一代版，除了 Firefox，IE 从 IE6 开始全力支持，据说 Firefox 到 6.0 也会提供全力支持的——希望如此吧。
扩展阅读：W3C
word-wrap
当文字在两个比较窄的容器中时，它的某个部分可能会因为太长而不能正确的换行。比如说链接就常常引起问题。如果你不想用 overflow: hidden 暗藏溢出的文字，那么你就能设置 word-wrap 为 break-word，它能让字符串在到达容器的宽度限制时换行。
浏览器全力支持：CSS3，所有当代应用领域程序。
扩展阅读：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。
应用领域程序全力支持：CSS3，除了Firefox以外的所有当代应用领域程序，Firefox是全力支持background-attachment特性的，只是不全力支持local值.
扩展阅读：W3C
text-rendering
随着越来越多的中文网站开始用@font-fakerning和ligatures。
Gecko 和WebKit 应用领域程序处理那个特性的方式很不一样。前者默认启用那个特性，而后者，你需要将其设置为optimizeLegibility。
应用领域程序全力支持：CSS3, 所有WebKit 和Firefox应用领域程序.
扩展阅读：W3C
transform: rotateX/transform: rotateY
如果你已经开始选用 CSS3，那么你可能会比较熟悉 transform: rotate()，那个在z轴上旋转原素的特性。
但是你是否也知道，它也能更深入的旋转的（比如说，围绕x轴和y轴）？ 这些变形结合-webkit-backface-visibility: hidden会更合适。
如果你鼠标经过那个元素，它将会旋转180°，倒转过来:
小技巧:如果只是映射两个原素，你能设置 transform 为 rotateX(180deg) （对应 rotateY）或是设置 transform 为 scaleX(-1)（(对应 scaleY）
应用领域程序全力支持：CSS3, WebKit、firefox、Opera 和 IE9
扩展阅读：W3C，你需要知道的CSS3 动画技术
结语
正如你希望见到的，还有许多未知的很有用的特性。他们中的许多仍然处于试验性阶段因此可能一直这样即使最终可能会被应用领域程序摈弃。而有些有望在后续版中被所有的是应用领域程序支持。
然而，极难判断判断他们中的许多是好是坏，WebKit 独有的是特性随着 iOS 和 Android 的成功显得越来越重要。当然，许多CSS3特性多多少少已经能选用了。
如果你不喜欢私有特性，你能将它视为实验直到能在代码中实现以增强用户体验。同时，W3C 的CSS validator同样全力支持私有特性，它会返回警告而不是错误。
