对于Css3的新属性,你了解多少呢?虽然大多数的css3属性在很多流行的浏览器中不支持,但是我们鼓励在前端开发中要学会并且运行这些css3属性,因为这是未来的趋势。

关键是首先确定你是否对各个浏览器之间的细微的差别有所了解,你能肯定的说IE显示的90度的角就不圆滑嘛?这取决于你的决定。但是要永远记住,网站设计不必看到所有浏览器的不同。

下面介绍CSS3属性之Box-shadow
 

Box-shadow,可以使你的元素立即美化,只是记得不要把值设得太离谱。

 
  1. -webkit-box-shadow: 1px 1px 3px #292929;
  2. -moz-box-shadow: 1px 1px 3px #292929;
  3. box-shadow: 1px 1px 3px #292929;

box-shadow的四个参数:

  • x-offset x轴偏移
  • y-offset y轴偏移
  • blur 模糊值
  • color of shadow 阴影颜色

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

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

Clever Shadows

 
  1. <div>
  2.    <img src="tuts.jpg" alt="Tuts" />
  3. </div>

CSS:

 
  1. .box:after {
  2.    content'';
  3.    positionabsolute;
  4.    z-index-1/* hide shadow behind image */
  5.    /* The Shadow */
  6.    -webkit-box-shadow: 0 15px 20px rgba(0000.3);
  7.    -moz-box-shadow: 0 15px 20px rgba(0000.3);
  8.    -box-shadow: 0 15px 20px rgba(0000.3);                
  9.    width70%;
  10.    left: 15%/* one half of the remaining 30% (see width above) */
  11.    height100px;
  12.    bottom:  0;
  13. }

效果图: