Creación de efectos de radio de borde invertido
Pregunta:
¿Puede un radio de borde invertido Se logra el efecto donde las esquinas parecen curvarse. ¿hacia adentro?
Respuesta:
La propiedad border-radius del CSS nativo no permite valores negativos que darían como resultado un efecto invertido. Sin embargo, aquí hay un enfoque alternativo usando CSS:
Agregue cuatro elementos adicionales dentro del contenedor, asegurándose de que se extiendan ligeramente más allá de sus límites. Estos elementos deben coincidir con el color de fondo de la página, creando una ilusión del contenido de la página debajo. Coloque estos elementos estratégicamente alrededor de las esquinas y aplique un radio de borde para lograr el efecto invertido.
Fragmento de código:
#main {
margin: 40px;
height: 100px;
background-color: #004C80;
position: relative;
overflow: hidden;
}
#main div {
position: absolute;
width: 20px;
height: 20px;
border-radius: 100%;
background-color: #FFF;
}
.top { top: -10px; }
.bottom { bottom: -10px; }
.left { left: -10px; }
.right { right: -10px; }
Descargo de responsabilidad: Todos los recursos proporcionados provienen en parte de Internet. Si existe alguna infracción de sus derechos de autor u otros derechos e intereses, explique los motivos detallados y proporcione pruebas de los derechos de autor o derechos e intereses y luego envíelos al correo electrónico: [email protected]. Lo manejaremos por usted lo antes posible.
Copyright© 2022 湘ICP备2022001581号-3