"Si un trabajador quiere hacer bien su trabajo, primero debe afilar sus herramientas." - Confucio, "Las Analectas de Confucio. Lu Linggong"
Página delantera > Programación > ¿Cómo crear un efecto de radio de borde invertido en CSS?

¿Cómo crear un efecto de radio de borde invertido en CSS?

Publicado el 2024-12-22
Navegar:218

How to Create an Inverted Border-Radius Effect in CSS?

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; }
Último tutorial Más>

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