前端必须要掌握的几个CSS3的属性详解

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

1.x-offset x轴偏移
2.y-offset y轴偏移
3.blur 模糊值
4.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);