CSS CSS - CSS3 border-radius - 理解CSS3 Moz Mozilla KHTML Webkit Border Radius.css

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CSS CSS - CSS3 border-radius - 理解CSS3 Moz Mozilla KHTML Webkit Border Radius.css相关的知识,希望对你有一定的参考价值。

/*
	201008051249 - brandonjp - me trying to remember css/moz/webkit border radius
	Thanks to Jacob Bijani - CSS Border Radius http: //bit.ly/8Y8cJT
	Thanks to CSS Border Radius : : Richard A. Johnson http: //bit.ly/c9FclS
*/


CSS3 {
	border-top-left-radius: 22px;
	border-top-right-radius: 44px;
	border-bottom-right-radius: 66px;
	border-bottom-left-radius: 88px;
}

MOZILLA {
	-moz-border-radius-topleft: 22px;
	-moz-border-radius-topright: 44px;
	-moz-border-radius-bottomright: 66px;
	-moz-border-radius-bottomleft: 88px;
}

KHTML {
	-khtml-border-top-left-radius: 22px;
	-khtml-border-top-right-radius: 44px;
	-khtml-border-bottom-right-radius: 66px;
	-khtml-border-bottom-left-radius: 88px;
}

WEBKIT {
	-webkit-border-top-left-radius: 22px;
	-webkit-border-top-right-radius: 44px;
	-webkit-border-bottom-right-radius: 66px;
	-webkit-border-bottom-left-radius: 88px;
}



TOP-LEFT {
	border-top-left-radius: 22px;
	-moz-border-radius-topleft: 22px;
	-khtml-border-top-left-radius: 22px;
	-webkit-border-top-left-radius: 22px;
}

TOP-RIGHT {
	border-top-right-radius: 44px;
	-moz-border-radius-topright: 44px;
	-khtml-border-top-right-radius: 44px;
	-webkit-border-top-right-radius: 44px;
}

BOTTOM-RIGHT {
	border-bottom-right-radius: 66px;
	-moz-border-radius-bottomright: 66px;
	-khtml-border-bottom-right-radius: 66px;
	-webkit-border-bottom-right-radius: 66px;
}

BOTTOM-LEFT {
	border-bottom-left-radius: 88px;
	-moz-border-radius-bottomleft: 88px;
	-khtml-border-bottom-left-radius: 88px;
	-webkit-border-bottom-left-radius: 88px;
}



CSS 3 {
/* 5px radius on all 4 corners of the table */
	border-radius: 5px;

/* 5px radius on top left and bottom right corners only */
	border-radius: 5px 0 5px 0;

/* 5px radius on bottom left and top right corners only */
	border-radius: 0 5px 0 5px;

/* 5px radius on the top left corner only */
	border-top-left-radius: 5px;
/* 5px radius on the bottom left corner only */
	border-bottom-left-radius: 5px;
/* 5px radius on the top right corner only */
	border-top-right-radius: 5px;
/* 5px radius on the bottom right corner only */
	border-bottom-right-radius: 5px;
}

Mozilla (Firefox) {
/* 5px radius on all 4 corners of the table */
	-moz-border-radius: 5px;

/* 5px radius on top left and bottom right corners only */
	-moz-border-radius: 5px 0 5px 0;

/* 5px radius on bottom left and top right corners only */
	-moz-border-radius: 0 5px 0 5px;

/* 5px radius on the top left corner only */
	-moz-border-radius-topleft: 5px;
/* 5px radius on the bottom left corner only */
	-moz-border-radius-bottomleft: 5px;
/* 5px radius on the top right corner only */
	-moz-border-radius-topright: 5px;
/* 5px radius on the bottom right corner only */
	-moz-border-radius-bottomright: 5px;
}

KHTML (Konqueror) {
/* add -khtml- in front of the CSS 3 styles */
	-khtml-border-radius: 5px;
}

Webkit (Safari/Chrome) {
/* add -webkit- in front of the CSS 3 styles */
	-webkit-border-top-right-radius: 5px;
}

以上是关于CSS CSS - CSS3 border-radius - 理解CSS3 Moz Mozilla KHTML Webkit Border Radius.css的主要内容,如果未能解决你的问题,请参考以下文章

css和css3的区别

CSS3学习

CSS3

css3 文字梯形显示

CSS3 倒影

css3动画效果,如何设置呢?