这是在css3 UI规范中新增的一个功能，用来控制内容的可选择性。

用法：

1

user-select:value;

值：

• auto——默认值，用户可以选中元素中的内容
• none——用户不能选择元素中的任何内容
• text——用户可以选择元素中的文本
• element——文本可选，但仅限元素的边界内(只有IE和FF支持)
• all——在编辑器内，如果双击/上下文点击发生在子元素上，改值的最高级祖先元素将被选中。
• -moz-none——firefox私有，元素和子元素的文本将不可选，但是，子元素可以通过text重设回可选。

实例——用鼠标拖动或双击下面的文字试下：

浏览器支持

目前，只有Gecko和webkit支持该属性，包括基本上所有版本的Firefox/Chrome/Safari，IE10中也将支持该属性。当然，各个浏览器都必须加上私有前缀。Opera尚不支持。

结语

这个属性，在之前是被用来保护网站的内容，不被用户复制和转载，从而保护资讯的版权，但是这样却对普通用户的用户体验造成了伤害，而且，并不能真正的保护页面中的内容，这对前端开发人员来说，很容易搞定的吧？ …XD

现在，HTML5蒸蒸日上，很多网站或者web app会使用到Drag and Drop技术，user-select正好在一些情境中可以用到。

当然，技术是为人服务的，怎么用都可以，但是，伤害用户体验的产品，最终是得不到用户的吧。。。

• 项目主页：http://daneden.me/animate/
• 自定义下载样式：http://daneden.me/animate/build/
• git地址：https://github.com/daneden/animate.css

直接在图片元素上直接应用CSS3 inset box-shadow 或 border-radius时，浏览器并不能完美的渲染它们。不过，如果把这个图片用作背景图，你就可以可以给它添加任何样式了，浏览器也会很好地渲染。Darcy Clarke和我做了一个简单的教程，讲解如何使用jQuery来动态地制作完美的圆角图片。今天我将重温这个主题然后向你展示使用background-image的方法可以实现多少效果。我将向你展示如何使用box-shadow、border-radius 和 transition 来创作不同的图片风格。

先看下demo

问题 (见 demo)

看一下demo，请注意在第一行的图片中使用了border-radius和inset box-shadow。Firefox会直接在图片元素上渲染border-radius，但不会渲染inset box-shadow。chrome/safari则两者都不渲染。

解决方案

要让 border-radius 和 inset box-shadow 正常工作，解决方案就是将实际图片变作background-image.

动态方法

要想动态实现，可以简单的使用jQuery为每个图片元素外面包一个背景图片。下面的jQuery代码会将所有图片外面包一个span标签然后将图片用作其背景图片(jQuery代码由Darcy Clarke编写)。

1
2
3
4
5
6
7
8
9
10
11
12
13

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 
	$("img").load(function() {
		$(this).wrap(function(){
			return '<span class="image-wrap ' + $(this).attr('class') + '" 
				style="position:relative; display:inline-block; background:url(' + $(this).attr('src') + ') no-repeat center center; width: ' + $(this).width() + 'px; height: ' + $(this).height() + 'px;" />';
		});
		$(this).css("opacity","0");
	});
});
</script>

输出

上面的脚本将会输出下面的HTML代码：

1
2
3

<span class="image-wrap " style="position:relative; display:inline-block; background:url(image.jpg) no-repeat center center; width: 150px; height: 150px;">
	<img src="image.jpg" style="opacity: 0;">
</span>

圆形图片(见 demo)

现在，图片被用作背景图了，你可以给它添加任意你想要的样式上去。下面是一个简单的使用border-radius实现的圆形图片。如果你对CSS3不太了解，可以阅读下Basics of CSS3，也可以搜索一下前端观察。

CSS

1
2
3
4
5

.circle .image-wrap {
	-webkit-border-radius: 50em;
	-moz-border-radius: 50em;
	border-radius: 50em;
}

卡片风格(见 demo)

下面是一个像卡片的图片风格，用了多个inset box-shadow。

CSS

1
2
3
4
5
6
7
8
9

.card .image-wrap {
	-webkit-box-shadow: inset 0 0 1px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.4);
	-moz-box-shadow: inset 0 0 1px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.4);
	box-shadow: inset 0 0 1px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.4);
 
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
}

浮雕风格 (见 demo)

通过一点儿改变，我可以将卡片风格转换为浮雕。。。

CSS

1
2
3
4
5
6
7
8
9

.embossed .image-wrap {
	-webkit-box-shadow: inset 0 0 2px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -7px 0 rgba(0,0,0,.6), inset 0 -9px 0 rgba(255,255,255,.3);
	-moz-box-shadow: inset 0 0 2px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -7px 0 rgba(0,0,0,.6), inset 0 -9px 0 rgba(255,255,255,.3);
	box-shadow: inset 0 0 2px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -7px 0 rgba(0,0,0,.6), inset 0 -9px 0 rgba(255,255,255,.3);
 
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
}

软浮雕风格 (见 demo)

和浮雕风格真的很像，我只是加了1px的虚化～～

CSS

1
2
3
4
5
6
7
8
9

.soft-embossed .image-wrap {
	-webkit-box-shadow: inset 0 0 4px rgba(0,0,0,1), inset 0 2px 1px rgba(255,255,255,.5), inset 0 -9px 2px rgba(0,0,0,.6), inset 0 -12px 2px rgba(255,255,255,.3);
	-moz-box-shadow: inset 0 0 4px rgba(0,0,0,1), inset 0 2px 1px rgba(255,255,255,.5), inset 0 -9px 2px rgba(0,0,0,.6), inset 0 -12px 2px rgba(255,255,255,.3);
	box-shadow: inset 0 0 4px rgba(0,0,0,1), inset 0 2px 1px rgba(255,255,255,.5), inset 0 -9px 2px rgba(0,0,0,.6), inset 0 -12px 2px rgba(255,255,255,.3);
 
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
}

剪贴画风格(见 demo)

同样只是inset box-shadow，我可以让它看起来像剪贴画。

CSS

1
2
3
4
5
6
7
8
9

.cut-out .image-wrap {
	-webkit-box-shadow: 0 1px 0 rgba(255,255,255,.2), inset 0 4px 5px rgba(0,0,0,.6), inset 0 1px 0 rgba(0,0,0,.6);
	-moz-box-shadow: 0 1px 0 rgba(255,255,255,.2), inset 0 4px 5px rgba(0,0,0,.6), inset 0 1px 0 rgba(0,0,0,.6);
	box-shadow: 0 1px 0 rgba(255,255,255,.2), inset 0 4px 5px rgba(0,0,0,.6), inset 0 1px 0 rgba(0,0,0,.6);
 
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
}

变形和发光 (见 demo)

这个例子中，我为图片外容器增加了变形。mouseover的时候，它将从圆角形状变为圆形，然后增加了发光效果。发光效果通过多重box-shadow实现。

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

.morphing-glowing .image-wrap {
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
 
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
}
 
.morphing-glowing .image-wrap:hover {
	-webkit-box-shadow: 0 0 20px rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);
	-moz-box-shadow: 0 0 20px rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);
	box-shadow: 0 0 20px rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);
 
	-webkit-border-radius: 60em;
	-moz-border-radius: 60em;
	border-radius: 60em;
}

发光遮罩 (见 demo)

发光渐变遮罩是通过:after伪元素实现的。。。

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

.glossy .image-wrap {
	-webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.5);
	-moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,.5);
	box-shadow: inset 0 -1px 0 rgba(0,0,0,.5);
 
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
}
 
.glossy .image-wrap:after {
	position: absolute;
	content: ' ';
	width: 100%;
	height: 50%;
	top: 0;
	left: 0;
 
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
 
	background: -moz-linear-gradient(top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,.1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.7)), color-stop(100%,rgba(255,255,255,.1)));
	background: linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,.1) 100%);
}

倒影 (见 demo)

这个例子中，我将遮罩渐变移动到底部，于是它就成了倒影。。。

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

.reflection .image-wrap:after {
	position: absolute;
	content: ' ';
	width: 100%;
	height: 30px;
	bottom: -31px;
	left: 0;
 
	-webkit-border-top-left-radius: 20px;
	-webkit-border-top-right-radius: 20px;
	-moz-border-radius-topleft: 20px;
	-moz-border-radius-topright: 20px;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
 
	background: -moz-linear-gradient(top, rgba(0,0,0,.3) 0%, rgba(255,255,255,0) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,.3)), color-stop(100%,rgba(255,255,255,0)));
	background: linear-gradient(top, rgba(0,0,0,.3) 0%,rgba(255,255,255,0) 100%);
}
 
.reflection .image-wrap:hover {
	position: relative;
	top: -8px;
}

光泽和倒影(见 demo)

这个例子中，我同时使用了:before和:after伪元素来实现带倒影的光泽效果。

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

.glossy-reflection .image-wrap {
	-webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.6);
	-moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.6);
	box-shadow: inset 0 -1px 0 rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.6);
 
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
 
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
}
 
.glossy-reflection .image-wrap:before {
	position: absolute;
	content: ' ';
	width: 100%;
	height: 50%;
	top: 0;
	left: 0;
 
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
 
	background: -moz-linear-gradient(top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,.1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.7)), color-stop(100%,rgba(255,255,255,.1)));
	background: linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,.1) 100%);
}
 
.glossy-reflection .image-wrap:after {
	position: absolute;
	content: ' ';
	width: 100%;
	height: 30px;
	bottom: -31px;
	left: 0;
 
	-webkit-border-top-left-radius: 20px;
	-webkit-border-top-right-radius: 20px;
	-moz-border-radius-topleft: 20px;
	-moz-border-radius-topright: 20px;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
 
	background: -moz-linear-gradient(top, rgba(230,230,230,.3) 0%, rgba(230,230,230,0) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(230,230,230,.3)), color-stop(100%,rgba(230,230,230,0)));
	background: linear-gradient(top, rgba(230,230,230,.3) 0%,rgba(230,230,230,0) 100%);
}

胶带风格(见 demo)

这里使用了:after伪元素来在图片顶部实现了胶带风格的渐变。

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

.tape .image-wrap {
	-webkit-box-shadow: inset 0 0 2px rgba(0,0,0,.7), inset 0 2px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4);
	-moz-box-shadow: inset 0 0 2px rgba(0,0,0,.7), inset 0 2px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4);
	box-shadow: inset 0 0 2px rgba(0,0,0,.7), inset 0 2px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4);
}
 
.tape .image-wrap:after {
	position: absolute;
	content: ' ';
	width: 60px;
	height: 25px;
	top: -10px;
	left: 50%;
	margin-left: -30px;
	border: solid 1px rgba(137,130,48,.2);
 
	background: -moz-linear-gradient(top, rgba(254,243,127,.6) 0%, rgba(240,224,54,.6) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(254,243,127,.6)), color-stop(100%,rgba(240,224,54,.6)));
	background: linear-gradient(top, rgba(254,243,127,.6) 0%,rgba(240,224,54,.6) 100%);
	-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 0 rgba(0,0,0,.2);
}

变形和着色 (见 demo)

在下面的这个例子中，我用了 :after元素来在mouseover的时候添加发光渐变。

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

.morphing-tinting .image-wrap {
	position: relative;
 
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
 
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
}
 
.morphing-tinting .image-wrap:hover {
	-webkit-border-radius: 30em;
	-moz-border-radius: 30em;
	border-radius: 30em;
}
 
.morphing-tinting .image-wrap:after {
	position: absolute;
	content: ' ';
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
 
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
 
	-webkit-border-radius: 30em;
	-moz-border-radius: 30em;
	border-radius: 30em;
}
.morphing-tinting .image-wrap:hover:after  {
	background: -webkit-gradient(radial, 50% 50%, 40, 50% 50%, 80, from(rgba(0,0,0,0)), to(rgba(0,0,0,1)));
	background: -moz-radial-gradient(50% 50%, circle, rgba(0,0,0,0) 40px, rgba(0,0,0,1) 80px);
}

羽化边缘的圆形(见demo)

发散渐变也可以用作遮罩层来实现圆形羽化效果。

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

.feather .image-wrap {
	position: relative;
 
	-webkit-border-radius: 30em;
	-moz-border-radius: 30em;
	border-radius: 30em;
}
 
.feather .image-wrap:after  {
	position: absolute;
	content: ' ';
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
 
	background: -webkit-gradient(radial, 50% 50%, 50, 50% 50%, 70, from(rgba(255,255,255,0)), to(rgba(255,255,255,1)));
	background: -moz-radial-gradient(50% 50%, circle, rgba(255,255,255,0) 50px, rgba(255,255,255,1) 70px);
}

浏览器支持

本文的方法可以在支持border-radius、box-shadow、:before和:after伪元素的浏览器上，比如Chrome/Safari/Firefox等，而在一些落后的浏览器比如IE9(包括IE9)则不能完全支持——IE6/7/8没有任何表现，IE9会有普通的圆角。

发挥你的创造力

正如你看到的，你几乎可以使用:before和:after伪元素实现任何效果。如果你有用CSS3实现更多的创意图片效果，欢迎通过评论与大家分享。

PS,本文中使用:before/:after来实现伪元素，其实我更建议使用双冒号来实现，虽然单冒号有更多的浏览器支持，但是对于这些CSS3实现的效果来说，双冒号更安全一些。更多的原因，可以参考《:before和::before的区别》

IE开发者中心给到了一份详细的针对前端开发者的文档，列出了IE10支持的HTML5和CSS3新特性。嗯，它终于跟上了：

CSS3

• css region
• css3多列
• Flexbox
• grid
• 定位浮动(positioned float)
• 3D变换(3D transfrom)
• 动画(animation)
• 渐变(gradient)
• text-shadow
• 去掉样式表限制——在IE9之前的版本中，每个页面最多只能加载31个样式表文件，@import也只能最多嵌套4层，IE10中去掉了这些限制。

HTML5

其它

嗯，新东西很多，看起来还是很给力的。

需要注意的是，IE10对CSS3新特性的支持，大部分还是需要-ms-前缀的。

在某个项目中，很多元素需要定位在一个地图层上面，这里就要用到很多绝对定位或者相对定位的元素，但是这样的话，这些浮在上面的div或者其它元素一般都会给个宽高，或者relative的元素可以不给宽高，这个时候，这些元素就会盖住下面的地图层，以至于地图层无法操作。。。

然后正好在Google map见到了类似的问题，拿来当例子来说：

Google map中左上角的操作区域占位是挺大的，如红色框区域，然后在这个区域是无法操作地图层的。那么我们就可以给这个div设置 pointer-events:none，然后你就会发现下面的地图就可以拖动和点击了。

但是悲剧的是，操作区域本身却无法操作了，直接被无视掉了。不过不用担心，我们可以给里面的元素重新设置为 pointer-events:auto，当然，只给需要操作的元素区域设置。

貌似有点儿纠结，不过这样可以保证地图本身的可操作区域最大化。

嗯，上面只是个简单的例子，来看下具体用法：

pointer-events:  auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | inherit

pointer-events属性有很多值，但是对于浏览器来说，只有auto和non两个值可用，其它的几个是针对SVG的(本身这个属性就来自于SVG技术)。

pointer-events属性值详解

• auto——效果和没有定义pointer-events属性相同，鼠标不会穿透当前层。在SVG中，该值和visiblePainted的效果相同。
• none——元素不再是鼠标事件的目标，鼠标不再监听当前层而去监听下面的层中的元素。但是如果它的子元素设置了pointer-events为其它值，比如auto，鼠标还是会监听这个子元素的。
• 其它属性值为SVG专用，这里不再多介绍了。

浏览器兼容性

Firefox 3.6+和chrome 2.0+ 以及safari 4.0+都支持这个CSS3属性，IE6/7/8/9都不支持，Opera在SVG中支持该属性但是HTML中不支持。好吧，还是有点儿悲催～～

1. 透明化了盒子，通透性强了，因为透明了，所以背部的三个面也就要做出来了，所以总共6个面，比原作多3个；
2. 投影镜像，让盒子的立体感更强烈；
3. 边角线的处理，让盒子面与面之间过渡和谐。

你可以点击这里下载 源代码（只是写了moz下的效果，webkit的就没写了）

盒子的HTML结构很简单，如下：

1
2
3
4
5
6
7
8

<div>
<div>前</div>
<div>后</div>
<div>左</div>
<div>右</div>
<div>上</div>
<div>下</div>
</div>

一个大盒子包住“前、后、左、右、上、下”6个面，因为定位产生层高的关系，所以它的顺序其实是“后、下、左、前、上、右”，下面的div就会自然的叠在上面，就可以不写z-index了。

一、框架定位

初始化盒子面，顶好宽高、定位、背景色等属性，然后把变换原点设定在右上角。

盒子面一个个做，先从简单的入手，前后左右难度系数是一样的，一个斜切SKEW效果就可以实现，然后就是再分开定位：“前、后面”用 skew(0deg,20deg); Y轴正向斜切，“左、右面”用skew(0deg,-20deg); Y轴负向斜切，然后再定位对齐，基本的框就出来 了。

然后就是鸡肋“上、下面”，它需要旋转后斜切才能完成，所以难度系数也就上升了，这里我说 “旋转后斜切”，而不是 “斜切后旋转”，是有区别的，我的写法如下：

-moz-transform:rotate(-40deg) skew(30deg,20deg);

如果这样写：

-moz-transform:skew(30deg,20deg) rotate(-40deg);

那跟预期的效果不一样，确定了的斜切效果会因为后面的旋转而变形。

不知道你有没有亲手做过那个盒子，我在做的时候发现，为什么它顶部的“盒子盖”比侧面的“盒子壁”多嵌套了一层DIV，用来分离transform变换效果，我尝试着只用一个DIV去实现，结果证明，只要先写rotate再skew就可以保持skew的斜切效果，从而html结构跟css代码也就简洁了很多。

二、边框线

如果你看了代码，没有头晕的话，会不会有这么一个疑惑，为什么不用border来写边框线?

如果用border来写的话，border的宽度会跟width重叠，导致盒子占据的空间为200+1+1=202px，很恶心的数字，而且border也不贴着边界，如图：

所以用这样一种做法来实现边框效果：box-shadow/text-shadow ；

一般我们是用border来给元素描边，前几天逛论坛的时候，看到这样一种做法：给文字描边。

一般思维会想到text-shadow这个属性，但是它是投影，跟描边还是有区别的，text-shadow写法如下：

text-shadow:2px 0px 0px #f00；

投影效果如图：

具体的投影资料可以参考我这篇文章：CSS3阴影；

上面是在没有羽化的情况下向右偏移，然而text-shadow可以多重投影，那么如果向上下左右四个方向同时投影，会怎么样呢?

text-shadow:2px 0px 0px #f00,0px -2px 0px #f00,-2px 0px 0px #f00,0px 2px 0px #f00;

投影效果如图：

就变成适应文字形状的描边效果了，当初因为border不能满足文字的描边需求，才想出这样的法子来实现描边，那现在反推，既然border不能用来描边了，那就用box-shadow投影描边的方法来实现边框。

做出来的效果如下：

我给底部写了个投影：

-webkit-box-shadow:-1px 1px 2px rgba(50,50,50,0.1);

少许的向前向右偏移，基本的造型效果就已经出来了，但是这样还不行，盒子的透明是透明了，但是感觉朦朦胧胧的，应该加强透明的处理，要不然体现不出通透性（可以跟第一个图对比下）。

三、通透性

每个面受光不同，所以透明度也应该有所区别，我把上，前，右对着浏览者的透明度调低于后面，然后拉出半透明到透明的渐变叠加到基本的盒子颜色上，产生层次，我都是很淡的过渡色叠加，渐变写法如下：

background:-moz-linear-gradient(-45deg, rgba(255,255,255,0.3),rgba(255,255,255,0.2) 40%,rgba(255,255,255,0.2) 70%,rgba(255,255,255,0.1));

由左上到右下拉斜线渐变，从0% 0.3到40% 0.2，70% 0.2到100% 0.1；颜色很淡，如果把系数调大调深的话，渐变色就会很明显，由于里面各个面的渐变各不同，就不一一解释，相信看了源文件就会明白的了，我也是跟着自己感觉拉的渐变，没有很专业的光线投射研究，如果有错的地方你看出来了还望指出。

当调整出各个面的颜色之后，发现“前上右”面与面之间有边线分割，看起来很整齐，但是后面我原本没有画边线，结果‘左’跟‘后’有点混，所以还是12条边线一一画出，妥当些，前面的边线透明度为0.6，侧面的0.4，后面的0.2，突出层次。

四、投影

原本想用reflect来实现投影的，但是效果不理想，投影会夹杂着原图层的背景色，做不出来半透明到透明的效果来，而且reflect是webkit独 有的，firefox没有，另想它法，然而不可能为了投影效果添加新标签，得不偿失，在抛弃IE的情况下自然而然的会想到伪类，上面边框渐变 已经用了after，所以这里的投影我用before来做，同时，伪类做投影还有个好处：伪类层是相对于原图层的，所以修改原图层位置变形状态的时候，伪类层也会相对的修改。定位在对应的面正下方，向着用户的只有前跟右，所以就做了两个投影，如图：

普通状态盒子是闭合的，如“前”面所示，伪类层也跟着原图层一样进行了斜切变换，然后我设置了鼠标滑过就“打开”的效果，仅仅是这样一行代码：

.box .box_right:hover{-moz-transform:skew(0deg, 0deg);}

让不用去修改伪类投影层，它自动的就适应了原图层，恢复了变换状态。

还有一个点，就是投影是由上至下呈半透明至透明的渐变，对于背景色这个很容易就可以实现，但是边框呢？

我还没处理边框的状态是这样的：

下面的投影是“平”，所以边框线的渐变投影务必做出来，那怎么才能实现边框的纵向渐变，网上有很多关于渐变边框的做法，不过都是横向的利用多重边框的特性来制作，纵向的没有，我尝试用border来写，给border-color写个渐变，结果根本读不出来，单单调节border的透明度也只是做到单色透明，不能渐变透明，观察之后，想出了个“烂点子”，我上面说了，投影是由上至下呈半透明至透明的渐变，那么把两个不透明的东西叠加在一起会怎么样？

比如一个透明度为0.3的层叠在另外一个透明度为0.3的层上面，那就会在交界的地方产生一个透明度为0.6的区域，如图：

说到这样你应该懂了吧，我写了这么一句修改面的宽度：

.under .box_before:before{ width:201px;}

让两个面半透明面重叠，这样中间重叠区域就会变深，做出了“伪边框”的效果，至于到透明部分，0 + 0 = 0，所以透明的区域依然透明，从而实现了边框纵向渐变的效果。

五、内容

我原本只是想做个盒子，既然做出来了，当然要跟实际项目联系一下，如果允许的话我也想运用到真正的项目上去，将盒子作为载体模块，在上面发布文章，甚至我想把他弄成可以旋转的做图片墙。

挂上文字后效果如下：

html代码如下：

<div class="inBox">
<div class="conBox">
<h3>中秋节要来啦</h3>
<p>中秋节要来啦，龙祝大家中秋有月饼吃...哈根达斯冰皮的...</p>
</div>
</div>

之所以要在inBox里面套一个conBox，conBox用来设定内边距padding，这样做是因为inBox设定了width，如果width跟padding混在一起叠加，会使容器的宽度变形，所以一般分开为妙；至于h3写个title，是因为我在写gotrip的时候，h1，h2，h3标题没有统一分级，使用混乱，而css是这样写的，比如：.inBox h1{ };

当时写了一批之后有同事提出需要将h1改成h3，如果我一开始就这样写.inBox .title{ }，那他说修改的时候我也就只需要修改html标签，我不用动css的，吃一堑长一智，这里写下来跟大家分享。当然有时候也不必太过强求，毕竟 起类名是一件很伤脑细胞的事 哈。

个人博客原文地址：纯CSS3透明水晶盒

投影shadow

box-shadow

一般我们都是用css3的box-shadow来实现盒投影，用text-shadow来实现文字投影，box-shadow设置方型盒子投影，用raidus的话可以让盒子产生圆角，看起来就很圆滑舒服，一般的写法是这样的：

-moz-box-shadow:1px 1px 5px #000;

1px(水平方向偏移)  1px(垂直方向偏移)  5px(阴影羽化)  #000(颜色);

当偏移量为负数时就向反方向偏移，试试就明白了，这里不贴图。

这个是一般的投影效果，如果是内阴影，那么就加个“inset”属性，写法如下：

-moz-box-shadow:<strong>inset</strong> 1px 1px 5px #000;

这样就变成了PS里面的内阴影，效果很赞，很实用，如果需要内发光效果，则背景底色深，投影颜色浅，这样就会感觉是发光，而背景颜色深，投影颜色浅，这样看起来就是投影了；

text-shadow

文字是用text-shadow来产生阴影，而且产生的时候能跟随文字的轮廓投影，如下所示：

text-shadow:2px 2px 1px #000;

如果用box-shadow的话效果是这样的：

会根据放文字容器的盒子来投影(我设定了容器的宽度200px，背景未设定颜色 透明)，不会跟随文字轮廓投影；

然而text-shadow没有inset属性，不能跟box-shaow一样轻松实现文字内投影。

内发光/内投影

一层一层来，一般ps处理文字效果都是一层层的剥离，css3也差不多，所以先从文字内发光入手：

我写了这么一个页面试内发光，具体你可以下载这个代码页面看看：http://dl.dbank.com/c0ymzm8hbk

效果图如下：

内投影效果很明显，只要稍加改造就是内发光了，下面是实现原理：

既然在一个div层上面实现不了内投影，那么就用多几个层，但是不想在html中添加多余的标签，所以自然而然的就想到用伪类，于是我用了个:after, content里面写上跟div里面一样的文字，content文字样式会与原div的样式统一

我把.text层相对定位，.text:after绝对定位叠在它上面，因为样式一样，所以说文字是完全重叠的，然后就用text-shadow来做效果，文字自身的颜色比投影的高，如图：

本身的文字颜色是实体的，感觉处理起来会比较麻烦，所以我用rgba隐藏它，设置了文字的alpha为0（也可以用transparent属性来设置文字透明），这里用rgba是因为我只想隐藏文字本身的颜色层，如果用opacity的话，整个层都会消失；所以我用color:rgba(0,0,0,0);  来实现效果，写在.text的话就是隐藏掉.text的 文字本身颜色层，同时.text：after也会继承这隐藏属性，如果你单单想隐藏掉.text：after的话，那就在.text：after里面写，这样.text本身的颜色层就会保留；然后再在.text用text-shadow: 0px 0px 0px #000000;   投影出一个不偏移不羽化的实体投影打底色；

对于.text：after的投影层，需要涉及到ps羽化选区的知识，在羽化图像的时候，是根据选区边界为中心，向两边羽化，如果羽化值为10px，那么就是左右各5px，那么以选区边界为中心的10px像素范围会减缓的从不透明过渡到全透明，如图：

中心是红色，背景是黄色，羽化的时候原来不透明的红色区域也出现了半透明状态与背景黄色相融呈橙色，然而说这么多羽化的东西有什么用呢?

有用的，如果我们把背景色定死一个区域，上面的层羽化的话，会出现什么情况呢? 看下面这个ps图片你就应该明白了：

下面是一个“广州”的黑色纯文本文字，然后我复制多一个图层出来栅格化然后高斯模糊它，结果模糊层透过下面看到部分黑色纯文本文字与上面的红色半透明区域融合，视觉上有点内阴影的感觉。这个就是我实现 纯css3内发光的原理：一个.text纯文字层，一个.text:after层叠在上面投影产生内发光视觉错觉，这个也就是为什么要设置文字颜色透明的 原因，假如文字本身有颜色，那么就会挡住半透明，这样背景色就给挡住了，跟普通投影没区别。不过这个方法有瑕疵，而且很致命，就是羽化多出边界的会有羽化 的红色，如果投影红色换成白色，这样跟背景融合，效果没话说，但是如果用与底色区别太明显的颜色，这样就恶心了，不过可以调节成为“外发光”效果，事在人为。

渐变gradient

内发光基本解释完毕，下面说下渐变，其实我在之前的博客里面有提及

CSS3渐变http://blog.sina.com.cn/s/blog_74d6cedd0100q9o3.html以及

css3画水晶质感按钮http://blog.sina.com.cn/s/blog_74d6cedd0100qcdn.html

里面主要记渐变的基本写法，蒙版的用法，有兴趣的可以通过链接看看。

但是渐变颜色一般只是适用于背景色，就是方方框框那些，对文字不起作用，网上有很多关于渐变的文章，而我这里是用蒙版来做渐变，但是假如用单单用蒙版来做，颜色会比较单调，只有黑白的调节，这样渐变的过渡比较生硬，所以我采用层叠的方式，用蒙版遮挡一部分实现层之间颜色融合的方式来实现渐变，于是我连:before都用上了，依旧还是用.text打底色，.text:after蒙版实现渐变，.text:before提升渐变效果，同时实现内发光，具体你可以下载这个代码页面看看：http://dl.dbank.com/c00ya6av4u

具体做法是.text设置好高光底色#c60000，.text:after用蒙版，由上至下从透明到不透明拉垂直渐变蒙版，颜色设置深色点 的#ea0000，然后.text:before设置color:rgba(0,0,0,0);  透明因为要做内发光，然后设置投影为text-shadow:0px 0px 5px rgba(110,0,0,0.8);  更深的一个颜色#6e0000，带点透明这样融合起来效果会好些，调节内发光效果，其中你会发现各个层都有写 text-shadow，但是半径很小，因为网页文字是带锯齿的，这样处理的话，文字周围有了些许投影羽化了边界，看起来就柔和了，有起到消除锯齿的作用，最终效果也就出来了，不过因为FF不支持蒙版mask所以只能在webkit内核下的浏览器才能看到渐变效果，FF就没有了渐变效果，如图：

没有蒙版效果，所以是最上面.text:before的颜色，不过内发光，投影这些都还在，效果还勉强可以接受，至于悲剧IE不提也罢……

我一般在新浪博客上面写文章，顺便发下该文新浪地址：http://blog.sina.com.cn/s/blog_74d6cedd0100vjil.html

互联网已经成为一个提供参考、教材、新闻、文章和交互应用的大宝库了。然而，当为印刷设计内容时，一些功能显然仍然不可能或者很难使用Web标准来实现。

印刷出版物正在探索更好的方法来转换或者改变他们的内容以适应富数字格式。我们也看到这是一个让网页更富于表现和支持更复杂布局的好机会。

Adobe通过增强CSS进行了一些实验来展示一些传统杂志使用的复杂布局。我们也提交了一些建议到W3C CSS工作组，并构建了一个原型来通过webkit实现这些提案。你可以从Adobe Labs下载这些原型体验下。 然后你也可以在CSS Regions Module和这个W3C网站上的CSS Exclusions Module 页面找到W3C编写的草案。你也可以订阅W3C CSS 邮件列表来讨论这个问题。欢迎在邮件标题中加入”[css3-regions]“或者”[css3-exclusions]“来在这个邮件组中讨论这个问题。当然也可以通过Adobe Labs的CSS Regions 论坛反馈问题。

一些说明: 这是个在进行中的工作。随着我们和广大社区的讨论，我们将会做些改变。本文中用到的语法反映出当前W3C草案的现状，但是随着W3C工作组和社区的探讨可能会有些进化。同时也请注意，按照惯例，所有的新的数学将会首先采用-webkit-前缀。不过，为了简化，我在本文中省去了这个前缀。

现在，让我们了解这个扩展吧，他们可以被分为4类:

• 线性内容(Threading content): 从一个区域“流向”另一个区域的内容。
• 任意形状的容器(Arbitrarily shaped containers): 在非矩形区域内显示文本。
• 任意形状环绕(Arbitrarily shaped exclusion): 文本环绕非矩形区域。
• 区域样式(Region styling):根据流向区域显示内容。

下面是各种分类的例子：

内容流(Content flow)

在典型的HTML文档中，文字可以在多个区域显示，但是每个区域中的文字是不相关的(见图1)。如果你想要跨多个列显示文本，或者使用别的你需要的更复杂的区域来手动。在用户放大文字或者用户的字体比你设定的字体大时，这可能会无法乱掉。这个方法(css3 region)同样是的拥有在缩放窗口是自适应的流体布局成为可能，或者，当显示在平板上时，自适应竖屏(portrait)或者横屏(landscape)显示。

图1.文字跨3个不同宽的列显示

如果你想要单独地指定一托内容(比如文字和图片)，那些内容如何在一串区域内显示(flow)呢？这正是内容流(content flow)要做的。

要使用它，通过flow属性赋予内容的容器一个名字，这样做会将内容从普通的CSS布局流中去掉，然后你可以插入这个线程到1个或多个其他区域——使用from()作为content属性的值。

上面的三列布局的代码如下：

CSS

1
2
3
4
5
6
7

#source {
	flow: "main-thread";
}
.region {
	content: from(main-thread);
	background: #C5DFF0;
}

HTML

1
2
3
4
5
6
7

 <div id="source">
	<p>Lorem ipsum dolor [...]</p>
</div>
 
<div id="region1" class="region"></div>
<div id="region2" class="region"></div>
<div id="region3" class="region"></div>

你可以在一个页面中联合多个命名的flow。你也可以使用content-order属性来控制文字流的顺序。如果没有指定，将会使用正常的文档顺序。

通过这个简单的构件，你可以实现更复杂的布局，包括多列文本、不同宽高的列，以及跨越多个列的区域。(见图2)

图2. 文字穿越堆叠的区域和列

形状环绕(Wrap shape)

使用形状环绕，你可以控制文字经过区域的形状(见图3)。你也可以使用这个属性搭配内容流或者单独的创建更有趣的设计。

图3.文字内容显示在自定义形状的内部

要使用这个特性，你需要使用wrap-shape属性来定义形状，并设定wrap-shape-mode属性为需要的值。通过制定content的值，文字将显示在形状内部。

上面的现实心形的代码如下：

CSS

1
2
3
4
5
6
7
8
9
10
11

.circle{
/* 定义元素形状为一个圆*/
	wrap-shape: polygon(0px, 150px /* ...更多点*/);
	wrap-shape-mode: content;   
}
 
.heart{
	/* 定义元素形状为心形*/
	wrap-shape: polygon(150px, 32px /* ...更多的点 */);  
	wrap-shape-mode: content;   
}

HTML

1
2

<div class="circle"></div>
<div class="heart"></div>

我们的基于WebKit原型支持使用一个简单的多边形指定一个形状，但是你可以想象其它的集合体也可以被用于设定形状，或者甚至使用一张图片的alpha值。。。

环绕(Exclusions)

通过使用wrap-shap-mode属性的其它值，你可以创建不同的效果，包括指定的wrap-shape 属性可以理解为要完全避开的区域(看图4)。

图4. 文字环绕在自定义图形周围

CSS

1
2
3
4

.exclusion{
	/* 文字环绕整个元素 */
	wrap-shape-mode: around;
}

HTML

1
2
3

 <div class="exclusion circle">
	<p>Lorem ipsum dolor [...]</p>
</div>

区域样式(Region Styling)

在杂志中，指定内容环绕设计中的一个特定的区域是很常见的。我们称之为区域样式。例子展示了文字环绕在第一个区块(包括introduction标题的部分)被设定为深蓝色，而余下的文字则为灰色(看图 5)。

图5.文字样式依赖它流入的区域

CSS

1
2
3
4
5
6
7
8

p {
	color: gray:
}
@region-style #region_1 {
	p {
		color: #0C3D5F;
	}
}

HTML

1
2
3
4
5
6
7
8

<div id="article">
	<h1>Introduction</h1>
	<p>This is an example [...]</p>
</div>
<div id="region_1"></div>
<div id="region_2"></div>
<div id="region_3"></div>
<div id="region_4"></div>

区域样式目前还没有在Adobe Labs的这个webkit原型里面实现。

CSS3 区域和媒体查询

那些基本的构建块可以组合起来创建更有趣更复杂的布局，类似你经常看到的印刷出版物。你也可以将它们配合其它web标准适用。比如，结合CSS媒体查询，可以创建适应不同设备的方向(横屏landscape、竖屏portrait等)的布局。

图 6展示了使用wrap-shape属性结合CSS3 媒体查询来实现适应不同屏幕朝向的布局。

图6. 使用属性结合CSS3 媒体查询来实现适应不同屏幕朝向的布局

图7 展示如何让同样的内容适应不同的屏幕方向，以及变化的列数

图7 内容适应不同的屏幕方向，同时改变的列数

CSS3 区域和JavaScript

你也可以将这些功能结合JavaScript以创建交互的内容。在下面的图8中展示的，你可以滑动双向的箭头以移动图片，这个时候，文字围绕山体和汽车重新布局。

图8. 滑动双向的箭头移动图片，文字围绕山体和汽车重新布局

这个例子包含在上面提到的WebKit原型中，你可以下载体验下。

译注：CSS3 region这个词，着实不太好翻译，暂时按照region的意思翻译为区域，但是感觉很别扭。还有文中的一些词组，如果你觉得有更好的中文说法，请赐教——神飞。

当我想要完美的使用:nth-child或者:nth-of-type的时候有点儿头晕。你越理解它们，就能写出越好的CSS规则！

在这些简单的”秘方”(实际上是表达式)中我将重复的使用一个简单的列表并随即选择数字。但是很明显很容易改变它们以获得类似的选择器。

只选择第五个元素

1
2
3

li:nth-child(5){
	color: green;
}

要选择第一个元素，你可以使用:first-child，或者我相信你也可以改下上面的例子来实现。

选择除了前面的五个之外的所有元素

li:nth-child(n+6){
	color: green;
}

如果有超过10个元素，它将会选中超过5个。

只选择前面的5个

1
2
3

li:nth-child(-n+5){
	color: green;
}

从开始的那个，选择每第四个

1
2
3
4

li:nth-child(4n-7) {
	/* or 4n+1 */
	color: green;
}

选择奇数或者偶数

1
2
3

li:nth-child(odd){
	color: green;
}

1
2
3

li:nth-child(even){
	color: green;
}

当然这里也有另外两种实现，你懂的——神飞

选择最后一个元素

1
2
3

li:last-child {
	color: green;
}

选择倒数第二个

1
2
3

li:nth-last-child(2){
	color: green;
}

从这个例子可看出，上面那个例子也有第二种实现方法。

浏览器支持

有趣的是，:first-child 和:last-child被IE 7支持，但是知道IE9才支持剩下的选择器。如果你担心IE，可以使用Selectivizr。如果你浏览器兼容性对你很重要，请关注When can I use…

嗯，使用CSS3选择器是件很有趣的事情，像做简单的数学题一样。

更多关于CSS3选择器，请查阅：征服高级CSS选择器

尽管现代浏览器已经支持了众多的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的博客和下面的链接。

示例

图片蒙板:

1
2
3
4

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

示例

渐变蒙板:

1
2
3
4

.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

-webkit-text-stroke

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

示例

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

1

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

另一个特性是，通过设定1px的透明边框，可以让文字变得平滑:

1

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

创建红色镂空字体：

1
2
3
4

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为任何颜色。

想要禁用这个高亮，设置颜色的alpha值为0即可。

示例

设置高亮色为50%透明的红色:

1

-webkit-tap-highlight-color: rgba(255,0,0,0.5);

浏览器支持: 只有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

-webkit-box-reflect: below 5px;

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

1

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

扩展阅读: Safari Developer Library

-webkit-marquee

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

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

示例

1
2
3
4
5
6
7
8

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

1
2
3
4
5

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要和给到的颜色的数量保持一致，否则，最后的那个颜色值会填充到剩下的宽度。

示例

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

1
2
3
4
5

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。

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

浏览器支持: WebKit, Gecko.

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

-webkit-appearance 和 -moz-appearance

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

示例

1
2
3
4

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标签添加自动的编号。即便是嵌套的编码也是支持的。

示例

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

1

body {counter-reset: thecounter}

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

1
2
3
4

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

示例

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

1
2
3
4

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

然后，每个<li>设置为自动编号，分割符是一个点(.)，后面跟着一个空格

1
2
3
4

li:before {
counter-increment: section;
content: counters(section,".")"";
}

HTML代码：

1
2
3
4
5
6
7
8
9
10

<ol>
	<li>item</li> <!-- 1 -->
	<li>item <!-- 2 -->
		<ol>
			<li>item</li> <!-- 1.1 -->
			<li>item</li> <!-- 1.2 -->
		</ol>
	</li>
	<li>item</li> <!-- 3 -->
<ol>

浏览器支持: CSS 2.1.，所有的现代浏览器，IE 7+.

扩展阅读: W3C，CSS content, counter-increment 和 counter-reset详解

quotes

你会因为你的CMS不知道如何正确转换引用符号而纠结么？那么开始使用quotes属性吧。这样你就可以自定义任何符号了。然后你就可以用:before和:after伪元素为任何期望的元素指定引号了，悲催的是，webkit浏览器不支持这个属性——经测试，chrome 11已经开始支持这个属性了（之前的版本没有测试）。

示例

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

1
2
3

q {
quotes: '«' '»' "‹" "›";
}

下面两行用于为选定元素指定引号:

1
2

q:before {content: open-quote}
q:after {content: close-quote}

这样，<p><q>This is a very <q>nice</q> quote.</q></p>看起来将会是酱紫的：
«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不支持这个属性，但是貌似在最近的版本中将会提供支持。

示例

1
2
3
4

div {
width: 100px;
text-overflow: ellipsis;
}

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

扩展阅读: W3C

word-wrap

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

示例

1
2
3
4

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°，倒转过来:

1
2
3

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 同样支持私有属性，它会返回警告而不是错误。

祝你体验快乐！

PS：本文提到了很多特性，但是只是个概览，其实基本上每个属性都可以深入研究下的，如果你有兴趣，欢迎深入研究并分享之，谢谢——神飞。

本文原作者Christian Krammer是最近很牛B的css3files.com的站长。