对于css3的新属性，你又了解多少呢？虽然大多数的css3属性在很多流行的浏览器中不支持，但是我们鼓励在前端开发中要学会并且运行这些css3属性，因为这是未来的趋势。
关键是首先确定你是否对各个浏览器之间的细微的差别有所了解，你能肯定的说ie显示的90度的角就不圆滑嘛？这取决于你的决定。但是要永远记住，网站设计不必看到所有浏览器的不同。
1. border-radius
border-radius
border-radius是一大堆css3属性中最受欢迎的一种，border-radius是css3中级别最高的一个属性。当设计者害怕一个层在将在不同的浏览器之间以不同的方式显示时，css圆角，一个很初级的知识，将引导他们开始学习。 我们为移动浏览器提供一个备用的观看体验的想法都非常好。奇怪的是，当这种方法出现在桌面浏览器上时，他们却又不这么认为。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
接下来是非常普遍的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，这样做会产生一些有趣的效果。在下图中，我使用蓝色和绿色阴影来放大一下效果。
box-shadow
-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?
<div>
<img src=tuts.jpg alt=tuts />
</div>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
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;
}
text-outline
4. text-stroke
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
multiple backgrounds
background属性在css3样式中已经彻底改革，开始支持多背景图片。 举个简单的例子，如果没和合适的图像，我们将使用两个教程的图像作为我们的背景，当然在程序中你可能会用纹理，也许是渐变作为图像。
.box {
background: url(image/path.jpg) 0 0 no-repeat,
url(image2/path.jpg) 100% 0 no-repeat;
}以上，通过逗号分隔符，插入了两张背景图像，第一个的定位是（0，0），第二个的定位是（100%，0）。 要确定你对不支持的浏览器使用了备用图片，否则，它将跳此属性，使背景图像留空。 对旧浏览器的补偿要添加一张单独的图像给老浏览器用，像ie7。要定义两遍background，一遍是为老浏览器，另一遍是重写。或者你可以再次查看下modernizr。
.box {
/* fallback */
background: url(image/path.jpg) no-repeat;
/* modern browsers */
background: url(image/path.jpg) 0 0 no-repeat,
url(image2/path.jpg) 100%