Ya conocemos border-radius, la propiedad CSS que nos permite redondear los elementos de nuestras páginas mediante CSS. Aunque la propiedad aún no está correctamente integrada en los navegadores actuales, podemos disfrutar de ella mediante el uso de los correspondientes prefijos:
// Mozilla
-moz-border-radius:1em;
// WebKit
-webkit-border-radius:1em;
// W3C
border-radius:1em;Aún así, hay gente que ha estado haciendo cosas realmente interesantes con ella.
Código
#wrapper{
width: 1000px;
margin: auto;
position: relative;
}
#circle{
position: absolute;
top: 100px;
left: 0;
z-index: 0;
width: 200px;
height: 200px;
background-color: #a72525;
-webkit-border-radius: 100px;
}
#circle1{
position: absolute;
top: 105px;
left: 5px;
z-index: 1;
width: 200px;
height: 200px;
background-color: #efefef;
-webkit-border-radius: 100px;
}
Quizás no le encontremos una utilidad real, pero como curiosidad es interesante 😀
8 comentarios, 3 referencias
+
#