css3 圆角

最新推荐文章于 2025-12-05 07:37:55 发布

转载最新推荐文章于 2025-12-05 07:37:55 发布 · 942 阅读

文章标签：

#css #safari #firefox #opera #chrome #浏览器

CSS3 border-radius:

浏览器参照基准：Firefox3.6 and Later, Chrome5 and Later, Safari5 and Later, Opera10.53 and Later, IE系列不做参考

全圆角：border-radius/-moz-border-radius

#border-radius{
	-moz-border-radius:10px;               /* For Firefox3.6+ */
	border-radius:10px;                    /* For Latest Opera, Chrome, Safari */
}

左上圆角：border-top-left-radius/-moz-border-radius-topleft

#border-top-left-radius{
	-moz-border-radius-topleft:10px;       /* For firefox3.6+ */
	border-top-left-radius:10px;           /* For Latest Opera, Chrome, Safari */
}

右上圆角：border-top-right-radius/-moz-border-radius-topright

#border-top-right-radius{
	-moz-border-radius-topright:10px;      /* For firefox3.6+ */
	border-top-right-radius:10px;          /* For Latest Opera, Chrome, Safari */
}

右下圆角：border-bottom-right-radius/-moz-border-radius-bottomright

#border-bottom-right-radius{
	-moz-border-radius-bottomright:10px;   /* For firefox3.6+ */
	border-bottom-right-radius:10px;       /* For Latest Opera, Chrome, Safari */
}

左下圆角：border-bottom-left-radius/-moz-border-radius-bottomleft

#border-bottom-left-radius{
	-moz-border-radius-bottomleft:10px;    /* For firefox3.6+ */
	border-bottom-left-radius:10px;        /* For Latest Opera, Chrome, Safari */
}

不规则圆角：border-bottom-left-radius/-moz-border-radius-bottomleft

#border-irregular-radius{
	-moz-border-radius-topleft:20px 50px;    /* For firefox3.6+ */
	border-top-left-radius:20px 50px;        /* For Latest Opera, Chrome, Safari */
}

圆角的一个小变通（画圆）：border-radius/-moz-border-radius

#border-circle-radius{
	width:200px;
	height:200px;
	-moz-border-radius:100px;               /* For Firefox3.6+ */
	border-radius:100px;                    /* For Latest Opera, Chrome, Safari */