CSS盒子圆角边框

盒子圆角边框

border-radius: length;
border-radius: 10px;
border-radius: 50%;						//设置半径为宽度的一半
border-radius: 10px 20px 30px 40px;    //顺时针设置四个角的圆半径
border-radius: 10px 20px; 			   //设置左上右下为10px，右上左下为20px

border-top-left-radius: length;			//单独设置左上角
border-top-right-radius: length;		//单独设置右上角
border-bottom-left-radius: length;		//单独设置左下角
border-bottom-right-radius: length;		//单独设置右下角

圆角边框即使用四个圆放在矩形盒子的四个角，截取圆弧生成圆角边框，length即圆的半径，length越大，圆弧越明显。

若length为盒子宽度的一半且盒子为正方形，则会生成一个圆形盒子。若盒子为矩形，设置length为高度的一半则会生成圆弧矩形。