div 圆角

我们为移动浏览器提供一个备用的观看体验的想法都非常好。奇怪的是,当这种方法出现在桌面浏览器上时,他们却又不这么认为。

-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;

posted @ 2011-01-19 13:29  网络爱上点击  阅读(252)  评论(0编辑  收藏  举报