WonderCSS

圆角效果,CSS3新特性Border-Radius

有时我们想让DIV或某个物体变得更可爱,我们希望让它的边角变得圆滑,甚至,我们希望让一个四四方方的立方体变成一个圆,或者椭圆。那么border-radius属性就变得体贴了。

仍旧是那句老话,除了蛋疼的IE 6-8 版本都支持这个属性。而且已经不再需要为某个内核做标注了,只需要如下写:

border-radius:8px;

以上为物体四个边角圆角都为8像数。如果想让四个边角的某一处为圆角的话,比如左上角,则可以这么写:

border-top-left-radius:8px;

那么让正方变成圆形就可以得出,圆角为立方边长的50%就可以了:

.box {
	width:50px;
	height:50px;
	border-radius:25px;
}

By 于湛 发布于 2013.02.7 4,897 次浏览

发表评论

电子邮件地址不会被公开。 必填项已用*标注