html border-radius这个水平半径和垂直半径怎么整啊？我的这个花瓣怎么弄整齐啊？求带

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
	.all{
		width: 800px;
		height: 800px;
		margin: 50px auto;
		background-color: #E2E2E2;
	}
	.box{
		width: 420px;
		height: 420px;
		/*margin: 50px auto;*/
		transition: 4s ease-in-out;
		/*background-color: #D1D1D1;*/
	}
	.box div{
		width: 200px;
		height: 200px;
		margin: 5px;
/*		border: 1px solid #000;*/
		float: left;
	}
	.box div:nth-child(1){
		 border-radius:200px 57px 1px 250px / 100px 230px  1px 149px;
		 background-color: #11E611;
		 overflow: hidden;
	}
	.box div:nth-child(2){
		 border-radius:57px 200px 250px 1px / 230px 100px 149px 1px;
		 background-color: #EDED0B;
	}
	.box div:nth-child(3){
		 border-radius:250px 1px 57px 200px / 230px 1px  149px 100px;
		 background-color: #ED1313;
	}
	.box div:nth-child(4){
		 border-radius:1px 250px 57px 200px / 1px 149px 230px 100px;
		 background-color: #0F0FEA;
	}
	.box:hover{transform:rotate(720deg);}
</style>
</head>
<body>
<div class="all">
		<div class="box">
			<div></div>
		    <div></div>
		    <div></div>
		    <div></div>
		</div>
		<div class="point"></div>
		<div class="stick"></div>		
</div>
</body>
</html>

侠客岛的含笑

浏览 2298回答 1

1回答

Cassie_yu

第四个花瓣border-radius:1px 250px 200px 57px/1px 149px 100px 230px;

0 0

随时随地看视频慕课网APP