CSS3那些不为人知的高级属性

目录

• 前言
• 一 WebKit特有属性
  • 1.1. -webkit-mask
    • 示例 - 图片蒙板:
    • 示例 - 渐变蒙板:
  • 1.2. -webkit-text-stroke
    • 示例 - 为所有的

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

    • 示例 - 通过设定1px的透明边框，可以让文字变得平滑:
    • 示例 - 创建红色镂空字体：
  • 1.3. -webkit-nbsp-mode
  • 1.4. -webkit-tap-highlight-color
    • 示例：设置高亮色为50%透明的红色:
  • 1.5. zoom: reset
  • 1.6. -webkit-margin-collapse
  • 1.7. -webkit-box-reflect
    • 示例
  • 1.8. -webkit-marquee
    • 示例
  • 1.9 -webkit-text-size-adjust
  • 1.10 outline：none
  • 1.11 -webkit-touch-callout
• 二 Gecko特有属性
  • 2.1 font-size-adjust
    • 示例
  • 2.2 image-rendering
  • 2.3 -moz-border-top-colors
    • 示例
• 三 混合属性
  • 3.1 -webkit-user-select 和 -moz-user-select
  • 3.2 -webkit-appearance 和 -moz-appearance
    • 示例 链接外观按钮
    • 消除输入框和按钮的原生外观
  • 3.3 text-align: -moz-center/-webkit-center
• 四 CSS 2.1属性
  • 4.1 counter-increment
    • 示例
    • 示例
  • 4.2 quotes
    • 示例
• 五 你或许听说过但是没有记住的CSS3属性
  • 5.1 text-overflow
  • 5.2 word-wrap
  • 5.3 resize
  • 5.4 background-attachment
  • 5.5 text-rendering
  • 5.6 transform: rotateX/transform: rotateY
    • 示例

前言

尽管现代浏览器已经支持了众多的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特有属性

1.1. -webkit-mask

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

-webkit-mask让为一个元素添加蒙板成为可能，从而你可以创建任意形状的花样。蒙板可以是CSS3渐变或者半透明的PNG图片。蒙板元素的alpha值为0的时候会覆盖下面的元素，为1的时候会完全显示下面的内容。相关的属性有-webkit-mask-clip、 -webkit-mask-position 和-webkit-mask-repeat等，严重依赖来自于background中的语法。更多信息请查看webkit的博客.

示例 - 图片蒙板:

.element{
  background: url(img/image.jpg) repeat;
  -webkit-mask: url(img/mask.png);
}

示例 - 渐变蒙板:

.element2 {
  background: url(img/image.jpg) repeat;
  -webkit-mask: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}

扩展阅读: Safari Developer Library

1.2. -webkit-text-stroke

CSS边框的一个不足就是只有矩形的元素才能使用。-webkit-text-stroke可以为文字添加边框。它不但可以设置文字边框的宽度，也能设置其颜色。而且，配合使用color: transparent属性，你还可以创建镂空的字体！

示例 - 为所有的<h1>标题设定一个2px宽的蓝色边框:

h1 {
  -webkit-text-stroke: 2px blue;
}

示例 - 通过设定1px的透明边框，可以让文字变得平滑:

h2 {
  -webkit-text-stroke: 1px transparent;
}

示例 - 创建红色镂空字体：

h3 {
color: transparent;
-webkit-text-stroke: 4px red;
}

1.3. -webkit-nbsp-mode

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

-webkit-nbsp-mode: space;

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

1.5. zoom: reset

通常来说，zoom是一个IE专用的属性。但是webkit也开始支持它了，而且使用值reset，webkit可以实现不错的效果(有趣的是，IE不支持这个值)。它让你重设掉浏览器中正常的缩放行为——如果某个元素被声明了zoom:reset，页面上的其它元素在用户放大页面的时候都会跟着放大。

注：其实，我们常用来禁用chrome强制字体大小的时候用到的-webkit-text-size-adjust:none;也是可以实现类似的效果，不同的是，设置该属性的元素内的文字不会被放大/缩小，但是页面上的其它元素则会变化

1.6. -webkit-margin-collapse

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

最常见的例子就是两个相邻的

元素会共享他们的margin值。想要控制这个表现，我们可以使用-webkit-margin-collapse及其分拆后的-webkit-margin-top-collapse、-webkit-margin-bottom-collapse等属性。默认值是collapse，值separate则停止共享margin值，也就是说，第一个元素的底部边距和第二个元素的头部边距会正常叠加。

1.7. -webkit-box-reflect

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

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

示例

这个倒影会出现在它的父元素的下面并有5px的间距:

-webkit-box-reflect: below 5px;

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

-webkit-box-reflect: right 0 url(mask.png);

1.8. -webkit-marquee

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

ozPDA创建的这个天气的应用很好的使用了它。 (如果你木有看到变换的文字，可以尝试换一个城市来体验。需要使用WebKit内核浏览器)

示例

.marquee {
  white-space: nowrap;
  overflow:-webkit-marquee;
   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属性是最好的——神飞。

1.9 -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不要定义成可继承的或全局的

1.10 outline：none

(1)pc a标签
在pc端为a标签定义这个样式的目的是: 为了取消ie浏览器下点击a标签时出现的虚线。ie7及以下浏览器还不识别此属性，需要在a标签上添加hidefocus="true"

 a {
   outline：none;
 }

(2)pc input，textarea
取消chrome下默认的文本框聚焦样式

input，textarea{
  outline:none;
}  

(3)在移动端是不起作用的，想要去除文本框的默认样式可以使用-webkit-appearance，聚焦时候默认样式的取消是-webkit-tap-highlight-color。看到一些移动端reset文件加了此属性，其实是多余。

1.11 -webkit-touch-callout

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

img,
a {
  -webkit-touch-callout:none;  
}

二 Gecko特有属性

2.1 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

2.2 image-rendering

n年前，图片并不会被按照其原始大小显示，而是被设计师给缩放掉。取决于缩放的大小和上下文，图片可能会在浏览器中展现的不太好或者干脆就是错掉了的。现在，浏览器有了更好的算法来显示缩放的图片，不过，在你的图片被缩放后完全的控制其表现也是件很赞的事情。

如果你的图片有比较锐的线条并希望他们在缩放后保持它，这个Gecko私有属性就显得特别有用。相关的值是-moz-crisp-edges。同样的算法也用在optimizeSpeed，而auto 和optimizeQuality 定义为标准行为(用可行的最佳质量来缩放元素)。 image-rendering 属性同样可以用于

值得注意的是，-ms-interpolation-mode: bicubic，尽管它是个IE专有属性。然而，它让Internet Explorer 7 在缩放图片后将其渲染为比较高的质量。由于这个浏览器默认处理的很烂，所以这个属性可能会很有用。

浏览器支持: Gecko.

2.3 -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.

三 混合属性

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

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

input {
  -webkit-user-select: none;
  -moz-user-select: none;
}

请谨慎使用这个属性：因为大部分用户是来查看信息的，他们可以复制并存储下来以备将来之用，所以这种方法既无用也无效。如果你禁用了复制粘贴功能，用户还是可以通过查看源文件来获取到他们想要的内容。搞不懂这个属性为什么会被webkit和gecko支持。

浏览器支持: WebKit, Gecko.

3.2 -webkit-appearance 和 -moz-appearance

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

示例 链接外观按钮

a {
-webkit-appearance: button; -moz-appearance: button;
}
浏览器支持: WebKit, Gecko.

消除输入框和按钮的原生外观

注意：不同type的input使用这个属性之后表现不一。

• text、button无样式
• radio、checkbox直接消失

input,
button,
radio,
checkbox {
  -webkit-appearance: none;  
}

3.3 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.

四 CSS 2.1属性

4.1 counter-increment

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

配合:before 伪元素和content 属性，counter-increment可以为所有的HTML标签添加自动的编号。即便是嵌套的编码也是支持的。

示例

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

body {
  counter-reset: thecounter;
}

下面的样式让每一个<h1>标题都有一个”Section”的前缀，然后其后面的数字自动的递增1(这是默认的，可以省略掉)，这里thecounter是计算器的名称:

.counter h1:before {
  counter-increment: thecounter 1;
  content:"Section"counter(thecounter)":";
}

示例

对于一个嵌套编码的列表，重设计数器，然后关掉<ol>的自动编码，因为它是无嵌套的:

ol {
  counter-reset: section;
  list-style-type: none;
}

然后，每个