css3圆角 border-radius

border-radius

在css2中我们制作圆角时通常使用背景图片,然后添加四个空标签,通过绝对定位来实现。不仅制作麻烦,而且后期维护也不方便。现在css3中添加了border-radius属性,不仅减少了网站维护的工作量,使得代码更简单,而且还提高了网站的性能,减少http请求。

语法:

border-radius:none | <length> {1,4} [/<length>{1,4}]

说明:

border-radius是一种缩写方法,第一个值是水平半径,第二个值是垂直半径。如果只有一个值则其水平半径和垂直半径相等,为我们经常见到的普通的圆角。若其中有一个值为0,这个角为直角,而不是圆角。

各浏览器的兼容性:

引擎类型 Gecko Webkit
border-radius -moz-border-radius -webkit-border-radius
border-bottom-left-radius -moz-border-radius-bottomleft -webkit-border-bottom-left-radius
border-bottom-right-radius -moz-border-radius-bottomright -webkit-border-bottom-right-radius
border-top-left-radius -moz-border-radius-topleft -webkit-border-top-left-radius
border-radius -moz-border-radius -webkit-border-radius

对于上面的兼容性问题,我现在所用的版本谷歌和火狐浏览器已经不需要单独写样式了。

实例:

下面的css代码是基于我所用的浏览器来写的,已经不需要为mozilla和webkit内核的浏览器单独写样式:

.rect{
	background-color:#f60;
	width:200px;
	height:50px;
	line-height:50px;
	text-align:center;
	border-top-left-radius:30px 40px;
	border-top-right-radius:30px 0;
	border-bottom-right-radius:30px;
	box-shadow:0 1px 1px #000 inset;
	border-style:solid;
	border-width:20px;
	border-left-color:#09c;
	border-top-color:#9c0;
	border-bottom-color:#90c;
	border-right-color:#00c;
}

最终效果(左边是火狐,右边是谷歌):

css3 圆角示例图片

完整的css代码:

.rect{
	background-color:#f60;
	width:200px;
	height:50px;
	line-height:50px;
	text-align:center;
	border-top-left-radius:30px 40px;  /*左上角*/
	-moz-border-radius-topleft:30px 40px;   /*火狐左上角*/
	-webkit-border-top-left:30px 40px;    /*谷歌左上角*/
	border-top-right-radius:30px 0;
	-moz-border-radius-rightleft:30px 0;   /*火狐右上角*/
	-webkit-border-right-left:30px 0;    /*谷歌右上角*/
	border-bottom-right-radius:30px;
	-moz-border-radius-bottomright:30px;   /*火狐右下角*/
	-webkit-border-bottom-right:30px;    /*谷歌右下角*/
	box-shadow:0 1px 1px #000 inset;
	border-style:solid;
	border-width:20px;
	border-left-color:#09c;
	border-top-color:#9c0;
	border-bottom-color:#90c;
	border-right-color:#00c;
}

 

马上分享给你的朋友吧~

css3圆角 border-radius》上有 1 条评论

发表评论

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

*

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>