前面我已经介绍过了30个应该记住的CSS选择器，那么新的CSS3又有哪些新属性呢？虽然大多数需要特定的前缀，但你仍然可以在你的项目中使用它，其实上我也鼓励大家这么做。

关键是首先确定你是否对各个浏览器之间的细微的差别有所了解，你能肯定的说IE显示的90度的角就不圆滑嘛？这取决于你的决定。但是要永远记住，网站设计不必看到所有浏览器的不同。在文章的最后，我们将显示一个有趣的最终的案例。

1、 border-radius

border-radius是一大堆CSS3属性中最受欢迎的一种，border-radius是CSS3中级别最高的一个属性。当设计者害怕一个层在将在不同的浏览器之间以不同的方式显示时，CSS圆角，一个很初级的知识，将引导他们开始学习。

我们为移动浏览器提供一个备用的观看体验的想法都非常好。奇怪的是，当这种方法出现在桌面浏览器上时，他们却又不这么认为。

-webkit-border-radius: 4px;

-moz-border-radius: 4px;

border-radius: 4px;

注意：请在Safari 5 和 IE9浏览器中执行”border-radius”语法。

圆

许多读者也许不会意识到我们可以用这个属性来做一个圆。

-moz-border-radius: 50px;

-webkit-border-radius: 50px;

border-radius: 50px;

如果想再添加点效果，我们可以利用Flexible Box Model（详情在8中）来使得文字在垂直在水平方向都居中。这需要加点代码，但这仅仅是对不同浏览器的补偿。

display: -moz-box;

display: -webkit-box;

display: box;

-moz-box-orient: horizontal; /* the default, so not really necessary here */

-webkit-box-orient: horizontal;

box-orient: horizontal;

-moz-box-pack: center;

-moz-box-align: center;

-webkit-box-pack: center;

-webkit-box-align: center;

box-pack: center;

box-align: center;

2、 box-shadow

接下来是非常普遍的box-shadow，可以使你的元素立即美化，只是记得不要把值设得太离谱。

-webkit-box-shadow: 1px 1px 3px #292929;

-moz-box-shadow: 1px 1px 3px #292929;

box-shadow: 1px 1px 3px #292929;

box-shadow的四个参数

x-offset x轴偏移

y-offset y轴偏移

blur 模糊值

color of shadow 阴影颜色

现在，许多人不知道可以一次运用多个box-shadows，这样做会产生一些有趣的效果。在下图中，我使用蓝色和绿色阴影来放大一下效果。

-webkit-box-shadow: 1px 1px 3px green, -1px -1px blue;

-moz-box-shadow: 1px 1px 3px green,-1px -1px blue;

box-shadow: 1px 1px 3px green, -1px -1px blue;

Clever Shadows

The CSS

.box:after {

content: '';

position: absolute;

z-index: -1; /* hide shadow behind image */

/* The Shadow */

-webkit-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);

-moz-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);

-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);

width: 70%;

left: 15%; /* one half of the remaining 30% (see width above) */

height: 100px;

bottom:  0;

}

3、 text-shadow

text-shadow是我们可以省略前缀的几个CSS属性之一，类似的还有box-shadow，它必须应用于文本，并它们有相同的四个参数：

x-offset 水平位移

y-offest 垂直位移

blur 模糊值

color of shadow 阴影颜色

h1 {

text-shadow: 0 1px 0 white;

color: #292929;

}

Text-Outline

和box-shadow一样，它可以设置多个阴影通过逗号分隔符。例如，我们创建文本框的轮廓，当webkit不支持stroke效果，我们可以使用下面的代码让更多的浏览器支持（虽然不是很美观）。

body { background: white; }

h1 {

text-shadow: 0 1px 0 black, 0 -1px 0 black, 1px 0 0 black, -1px 0 0 black;

color: white;

}

4、 Text-Stroke

使用这个方法时要注意了，只有webkit（Safari， Chrome， iPhone）在最后的几年内还支持这个属性。其实，虽然我可能是错的，’text-stroke’还不属于CSS3范畴的一部分。在这种情况下，使用白 色字体时，firefox会显示一个空白页面。要解决此问题，你即可以使用Javascript，也可以通过使用一种不同于背景颜色的文字颜色。

h1 {

-webkit-text-stroke: 3px black;

color: white;

}

Feature Detection

我们如何为firefox提供一组可用的样式，和为另外的一组Safari或Chrome？解决办法就是多做测试。

通过feature detection，我们可以利用JavaScript来测试某属性是否可用，如果不行，我可就要采用备用的。

再回到text-stroke的问题上，为不支持此属性的浏览器设定一个备用黑色（目前的除webkit外）。

var h1 = document.createElement('h1');

if ( !( 'webkitTextStroke' in h1.style ) ) {

var heading = document.getElementsByTagName('h1')[0];

heading.style.color = 'black';

}

首先我们设定一个h1元素，然后执行，通过样式属性以确定-webkit-text-stroke是否支持此元素。如果不支持，我们会把标题由白色设置成黑色。

5、 Multiple Backgrounds