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

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

下面介绍CSS3属性之一:Border-radius

Border-radius是一大堆CSS3属性中最受欢迎的一种,border-radius是CSS3中级别最高的一个属性。当设计者害怕一个层在将在不同的浏览器之间以不同的方式显示时,CSS圆角,一个很初级的知识,将引导他们开始学习。 我们为移动浏览器提供一个备用的观看体验的想法都非常好。奇怪的是,当这种方法出现在桌面浏览器上时,他们却又不这么认为。border-radius是一大堆CSS3属性中最受欢迎的一种,border-radius是CSS3中级别最高的一个属性。当设计者害怕一个层在将在不同的浏览器之间以不同的方式显示时,CSS圆角,一个很初级的知识,将引导他们开始学习。我们为移动浏览器提供一个备用的观看体验的想法都非常好。奇怪的是,当这种方法出现在桌面浏览器上时,他们却又不这么认为。

 
  1. -webkit-border-radius: 4px;
  2. -moz-border-radius: 4px;
  3. border-radius: 4px;

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

我们可以用这个属性来做一个圆。

 
  1. -moz-border-radius: 50px;
  2. -webkit-border-radius: 50px;
  3.  border-radius: 50px;

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

 
  1. display: -moz-box;
  2. display: -webkit-box;
  3. display: box;
  4. -moz-box-orient: horizontal; /* the default, so not really necessary here */
  5. -webkit-box-orient: horizontal;
  6. box-orient: horizontal;
  7. -moz-box-pack: center;
  8. -moz-box-align: center;
  9. -webkit-box-pack: center;
  10. -webkit-box-align: center;
  11. box-pack: center;
  12. box-align: center;

效果图