Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • Practica 5 Ejercicio de Bordes Redondeados

    Cargado por

    Cesar Santos Fajardo
    7 vistas3 páginas

    Título original

    Practica 5 Ejercicio de bordes redondeados

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Denunciar este documento

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    7 vistas3 páginas

    Practica 5 Ejercicio de Bordes Redondeados

    Cargado por

    Cesar Santos Fajardo

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    de 3

    Ejercicio de Bordes Redondeados con HTML5 y CSS3

    Código del index.html

    <!DOCTYPE html>
    <html lang="es">
    <head>
    <meta charset="UTF-8">
    <title>Formas con border-radius</title>
    <link rel="stylesheet" href="css/estilo.css">
    </head>
    <body>
    <h3>Forma</h3>
    <div class="forma"></div>
    <h3>Circulo</h3>
    <div class="circulo"></div>
    <h3>Elipse</h3>
    <div class="elipse"></div>
    <h3>Cuarto de circunferencia</h3>
    <div class="cuarto-de-circunferencia"></div>
    <h3>Semicirculo</h3>
    <div class="semicirculo"></div>
    <h3>Hoja</h3>
    <div class="hoja"></div>
    <h3>Huevo</h3>
    <div class="huevo"></div>
    <h3>Imagen con forma de huevo</h3>
    <img src="img/imagen.jpg" alt="" class="huevo">
    </body>
    </html>
    Código del estilo.css

    .forma {
    width: 300px;
    height: 100px;
    background: blue;
    border-radius: .5em;
    -moz-border-radius: .5em;
    -wenkit-border-radius: .5em;
    }

    .circulo {
    height: 200px;
    width: 200px;
    background: red;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    }

    .elipse {
    height: 100px;
    width: 300px;
    background: green;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    }

    .cuarto-de-circunferencia {
    height: 200px;
    width: 200px;
    background: yellow;
    border-radius: 100% 0 0;
    -moz-border-radius: 100% 0 0;
    -webkit-border-radius: 100% 0 0;
    }

    .semicirculo {
    height: 100px;
    width: 200px;
    background: gray;
    border-radius: 50% / 100% 100% 0 0;
    -moz-border-radius: 50% / 100% 100% 0 0;
    -webkit-border-radius: 50% / 100% 100% 0 0;
    }

    .hoja {
    height: 200px;
    width: 200px;
    background: skyblue;
    border-radius: 10% 100% 0 100%;
    -moz-border-radius: 100% 0 0;
    -webkit-border-radius: 100% 0 0;
    }

    .huevo {
    height: 200px;
    width: 140px;
    background: brown;
    border-radius: 50% / 65% 65% 40% 40%;
    -moz-border-radius: 100% 0 0;
    -webkit-border-radius: 100% 0 0;
    }

    También podría gustarte