border-radius的理解

Posted 2023-03-19

参考技术A border-radius: 30px; // 边框的上右下左，都是以30px为半径绘制的原型，与div的宽高无关。

border-radius: 30px图片表示：

使用%来表示圆角值的时候，以对象的宽高为百分比进行折算；

如果对象的宽和高是一样的，那判断方法与第一点一致，只不过想象的时候，需要将宽高乘以百分数换算一下；

如果宽高不一致，那产生的效果，其实就是以对象的宽高乘以百分数后得到的值r1和r2，作为两条半径绘制出来的椭圆产生的弧度。

如何将一个宽高不一致的图形，用border-radius绘制成一个圆形？

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