Cómo convertir un DIV en una elipse

1. Cree un nuevo archivo html. Escribir código

lt;!DOCTYPE htmlgt;

lt;htmlgt;

lt;headgt;

lt;meta charset=" UTF-8"gt;

lt; titlegt; css para crear un ellipselt;/titlegt;

lt; stylegt;

2. Busque el archivo html lt;bodygt;tag, cree una etiqueta lt;divgt;dentro de la etiqueta lt;bodygt;y luego agregue class="ellipse" a esa etiqueta lt;divgt;. Como se muestra en la figura:

3. Establezca el estilo para la clase de elipse.

1. Busque la etiqueta lt;titlegt; y agregue una etiqueta lt;stylegt; después de la etiqueta lt;titlegt; ; Propiedades de la etiqueta:

.ellipse{

ancho: 200px;

alto:

color de fondo: rojo;

p>

}

4. Guarde el archivo html, use un navegador para abrir el archivo html y verifique si los atributos de elipse están configurados correctamente. En el navegador, puede ver que el estilo de elipse en el rectángulo rojo se configuró correctamente, como se muestra en la figura:

5. Regrese a la página de códigos y agregue: border-radius: 100 ? a las propiedades de la elipse para configurar la elipse. Como se muestra en la figura:

Para que sea compatible con varios navegadores, debemos agregar aquí

-o-border-radius: 100;

- ms-radio-borde: 100;

-radio-borde-moz: 100;

- radio-borde webkit: 100; /p >

6. Guarde el archivo html y ábralo con un navegador, podrá ver la elipse. Como se muestra en la figura:

Código:

lt;!DOCTYPE htmlgt;

lt;htmlgt;

lt;headgt;

lt;meta charset="UTF-8"gt;

lt;titlegt;css make ellipselt;/titlegt;

lt;stylegt;

.ellipse{

ancho: 200px;

alto: 100px;

color de fondo: rojo

borde -radio: 100;

-o-border-radius: 100;

-ms-border-radius:

-moz-border- radio :

-webkit-border-radius: 100;

}

lt;/stylegt;

lt;/headgt;

lt;bodygt;

lt;divgt;lt;/divgt;

lt;/bodygt;

lt;/htmlgt ;