先看代码，复制使用即可，css样式在本身提供的特别多的能力，但我仍以为很多前端开发者并不精深于研究css，这里提供一个背景样式，让您可以很轻松应对复杂的UI界面。（您将看到以下效果）
如您满意请给莫成尘点个Fabulous
以下是代码片段，一个完整的html文件，您可以直接复制，对于其他您想要设置的样式，这里提供了在线网站 网站链接.可以供您做其他参考，使用方式如下图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.div1{
border-radius:48% 53% 51% 49% / 42% 56% 0% 56% ;
background-image: linear-gradient(-225deg, #fff 0%, rgba(255,255,255,0) 40%,
rgba(0,255,255,0) 60%, cyan 100%),linear-gradient(45deg, #3023AE 0%, #f09 100%);
}
.div2{
border-radius:48% 53% 51% 2% / 56% 55% 0% 43% ;
background-image: linear-gradient(-225deg, #fff 0%, rgba(255,255,255,0) 40%,
rgba(0,255,255,0) 60%, cyan 100%),linear-gradient(45deg, #3023AE 0%, #f09 100%);
}
.div3{
border-radius:100% 0% 51% 48% / 57% 0% 100% 43% ;
background-image: linear-gradient(-225deg, #fff 0%, rgba(255,255,255,0) 40%,
rgba(0,255,255,0) 60%, cyan 100%),linear-gradient(45deg, #3023AE 0%, #f09 100%);
}
.div4{
border-radius:32% 0% 100% 100% / 1% 100% 100% 100% ;
background-image: linear-gradient(-225deg, #fff 0%, rgba(255,255,255,0) 40%,
rgba(0,255,255,0) 60%, cyan 100%),linear-gradient(45deg, #3023AE 0%, #f09 100%);
}
.div5{
width: 600px;
height: 400px;
border-radius:41% 58% 0% 100% / 45% 100% 0% 61% ;
background-image: linear-gradient(-225deg, #fff 0%, rgba(255,255,255,0) 40%,
rgba(0,255,255,0) 60%, cyan 100%),linear-gradient(45deg, #3023AE 0%, #f09 100%);
}
div{
display: inline-block;
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
<div class="div5"></div>
</body>
</html>
以上就是border-radius属性的特点，您可自定义的在官网测试
其他有关css的疑问或者此方法不理解的地方您可留言，我会尽快回复并帮您解决。