随着Css3和html5的风靡，越来越多的前端人员开始学习Css3，今天的文章就是来说说前端应该掌握10个Css3属性。

1. 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; 许多读者也许不会意识到我们可以用这个属性来做一个圆。

-moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px;

 

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的四个参数

现在，许多人不知道可以一次运用多个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是我们可以省略前缀的几个CSS属性之一，类似的还有box-shadow，它必须应用于文本，并它们有相同的四个参数：

h1 { text-shadow: 0 1px 0 white; color: #292929; }

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

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

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% 0 no-repeat; } 6. background-size

目前我们已经可以使用这种比较灵活的方式去重定义背景图像的大小。

background: url(path/to/image.jpg) no-repeat; background-size: 100% 100%;

上面的代码使得背景图像已经占据了整个可用空间。但是，如果我们使用一个特殊的图片去占据body元素的整个空间而无论窗口有多宽，那又怎么做？

body, html { height: 100%; } body { background: url(path/to/image.jpg) no-repeat; background-size: 100% 100%; }

对，就是这么做，分别定义background-size的x，y参数。 最新版本的Chrome 和 Safari支持此属性，但我们还是要用旧的方法支持旧的浏览器。

body { background: url(path/to/image.jpg) no-repeat; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; -webkit-background-size: 100% 100%; background-size: 100% 100%; } 7. text-overflow

浏览器最初开发文本溢出属性可以设定两个值：clip ellipsis 此属性支持切断容器中的文本，而且也给出了一个省略号的特性。

Text-overflow 

 .box {

-o-text-overflow: ellipsis; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; border: 1px solid black; width: 400px; padding: 20px; cursor: pointer; }

或许你会考虑当鼠标经过时显示全部的文本内容。

#box:hover { white-space: normal; color: rgba(0,0,0,1); background: #e3e3e3; border: 1px solid #666; }