Sto lavorando su un numero base div e per qualche motivo particolare, border-radius: 7px non si applica ad esso.raggio di raggio non funzionante
.panel {
float: right;
width: 120px;
height: auto;
background: #fff;
border-radius: 7px; // not working
}
A chiunque possa avere questo problema. Il mio problema era il collasso delle frontiere. E 'stato impostato su:
border-collapse: collapse;
ho impostato a:
border-collapse: separate;
ed è risolto il problema.
Ora sto usando il kit del browser in questo modo:
{
border-radius: 7px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
}
Hai provato questo? Non risolve questo particolare problema. –
Per qualche motivo la tua padding: impostazione 7px è annullare il border-radius. Cambiarlo in padding: 0px 7px
nella tua classe div = "social-box" css
uso
float:right
invece di
float:left
Perché? Questo non è correlato alla domanda posta. –
border-radius si stava applicando con successo su quel div ma non era float corretto. – Usman
Questo non lo aggiusta su Chrome. –
Il tuo problema non è correlato a come è stata impostata border-radius . Avvia Chrome e tocca Ctrl+Shift+j e controlla l'elemento. Deseleziona width e il bordo avrà angoli curvi.
Per chi si imbatte in questo problema in futuro, ho dovuto aggiungere
perspective: 1px;
all'elemento che stavo applicando il raggio confine. codice di lavoro finale:
.ele-with-border-radius {
border-radius: 15px;
overflow: hidden;
perspective: 1px;
}
Prova aggiungere importante al vostro CSS!. Funziona per me.
.panel {
float: right;
width: 120px;
height: auto;
background: #fff;
border-radius: 7px!important;
}
Ho appena aggiunto "border- collasso: separato; " al mio CSS in-line e ha funzionato! Grazie! – Danny
salvagente, elementi circolari semantico-ui fissi per me – mikus
Ci scusiamo per il recente aggiornamento di questo post. Dopo aver letto le specifiche di border-collapse su W3C puoi confermare che questa è semanticamente la risposta corretta e sembra avere una buona compatibilità cross-browser – Matt