Come posso creare un div con angoli arrotondati e sfondi trasparenti? Un po 'come fa Twitter. In modo che al bordo degli angoli è possibile vedere lo sfondo della pagina e non un bordo nero.Come posso rendere div angoli arrotondati con sfondo trasparente?
per un semplice raggio, utilizzare questo 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
RGBA è ciò di cui sta parlando, in riferimento a Twitter. Opacity renderà tutto trasparente nel div al 50%, RGBA svanirà solo ciò che vuole. –
Utilizzando css3:
#divid {
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
}
Si può leggere di più qui: http://www.css3.info/preview/rounded-border/
Rimosso il mio commento, stavo pensando ad altro. – drudge
Per il pieno controllo su quali elementi sono trasparenti e quali no, specificare i colori in rgba invece di esagono:
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*/
}
Il quarto numero all'interno RGBA è il livello di trasparenza (canale alfa), 1 rappresenta completamente opaco e 0 è completamente trasparente.
possibile duplicato di [Qual è il modo migliore per creare angoli arrotondati utilizzando i CSS?] (Http://stackoverflow.com/questions/7089/what-is-the-best-way-to-create-rounded-corners -using-css) – meagar
@Daniel Questa domanda riguarda specificamente l'uso di JavaScript e la risposta più importante è una libreria jQuery. Questo non è un duplicato di quella domanda. – meagar
@meagar Buona chiamata - ho perso i tag - ho pensato che l'OP cercasse un modo per farlo. commento eliminato. – Daniel