Primero, mire el código, cópielo y úselo. El estilo CSS en sí proporciona muchas capacidades, pero sigo pensando que muchos desarrolladores de aplicaciones para el usuario no son competentes en el estudio de CSS. Aquí hay un estilo de fondo que le permite manejar fácilmente con interfaz de usuario compleja. (Verás los siguientes efectos)
Si estás satisfecho, dale a Mo Chengchen un fabuloso
Aquí está el fragmento de código, un archivo html completo, puede copiar, para otros estilos que desee configurar, aquí proporciona un enlace al sitio web en línea que puede ser para que haga otra referencia, use el siguiente cuadro
<!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>
Las anteriores son las características del atributo border-radius. Puedes personalizar la prueba en el sitio web oficial
. Puedes dejar un mensaje si tienes alguna pregunta sobre css o no entiendes este método, y te responderé y te ayudaré Resuélvelo lo antes posible.