2011-01-31 32 views
6

¿Cómo puedo crear un div con esquinas redondeadas y fondos transparentes? Un poco como Twitter lo hace. Para que en el borde de las esquinas pueda ver el fondo de la página y no un borde negro.¿Cómo puedo hacer esquinas redondeadas div con fondo transparente?

+1

posible duplicado de [¿Cuál es la mejor manera de crear esquinas redondeadas usando CSS?] (Http://stackoverflow.com/questions/7089/what-is-the-best-way-to-create-rounded-corners -using-css) – meagar

+0

@Daniel Esa pregunta es específicamente sobre el uso de JavaScript, y la respuesta principal es una biblioteca jQuery. Esto no es un duplicado de esa pregunta. – meagar

+0

@meagar Buena llamada - Extrañé las etiquetas - Pensé que el OP estaba buscando la forma de hacerlo. comentario borrado. – Daniel

Respuesta

9

por una simple radio, utilizar este CSS:

div{ 
-moz-border-radius:10px; /* for Firefox */ 
-webkit-border-radius:10px; /* for Webkit-Browsers */ 
border-radius:10px; /* regular */ 
opacity:0.5; /* Transparent Background 50% */ 
} 

Greez, Chuggi

+1

RGBA es de lo que está hablando, en referencia a Twitter. La opacidad hará que todo en el div sea transparente al 50%, RGBA simplemente se desvanecerá. –

1

El uso de CSS3:

#divid { 
-moz-border-radius: 15px; 
-webkit-border-radius: 15px; 
border-radius: 15px; 
} 

Usted puede leer más sobre esto aquí: http://www.css3.info/preview/rounded-border/

+0

Eliminado mi comentario, estaba pensando en otra cosa. – drudge

7

Para un control total sobre qué elementos son transparentes y cuáles no, especifique los colores en rgba en lugar de hex:

div{ 
    -moz-border-radius:10px; 
    -webkit-border-radius:10px; 
    border-radius:10px; 
    background: #fff; /* fallback for browsers that don't understand rgba */ 
    border: solid 10px #000; /* fallback for browsers that don't understand rgba */ 
    background-color: rgba(255,255,255,0.8); /* slighly transparent white */ 
    border-color: rgba(0,0,0,0.2); /*Very transparent black*/ 
} 

El cuarto número dentro RGBA es el nivel de transparencia (canal alfa), 1 representa completamente opaco y 0 es completamente transparente.

+0

Último atributo, 'border-color', ¿verdad? O debería ser solo un color rgba como 'border-color: rgba (0,0,0,0.2)? – Ivan

+1

@Ivan tiene razón, gracias por el aviso – Duopixel

Cuestiones relacionadas