Se un elemento esiste in una pagina con più di un colore del bordo, l'angolo in cui si incontrano questi colori crea una smussatura per impostazione predefinita. Questa sembra una scelta strana per lo stile border-corner. Preferirei invece che uno dei bordi "sopraffa" l'altro bordo in modo tale che venga mostrata una linea retta.Rimozione dell'effetto smussato sull'angolo dei bordi
per illustrare questo effetto, considerare quanto segue:
Vedi esempio jsFiddle esempio ho creato here.
Le due posizioni in alto mostrano il comportamento predefinito con smusso. I due in basso visualizzano il comportamento desiderato e atteso, dove in questo caso, "overpowers" border-top o "overrides" l'angolo di border-left e border-right.
Il markup per il caso superiore:
<div class="container">
<div class="border">Item one</div>
<div class="border">Item two</div>
</div>
E il CSS:
.container {
margin: 5px;
width: 150px;
background: yellow;
}
.border {
padding: 5px;
border: 15px solid red;
border-top: 15px solid teal;
}
Il markup per il caso di fondo:
<div class="container">
<div class="border-top"></div>
<div class="border-reg">Item one</div>
<div class="border-top"></div>
<div class="border-reg">Item two</div>
</div>
E il CSS:
.border-top {
border-top: 15px solid teal;
}
.border-reg {
border: 15px solid red;
border-top: 0;
padding: 5px;
}
Sebbene il secondo metodo che ho ideato produca l'effetto che desidero, sembra che questo sia inutilmente noioso per qualcosa che avrei assunto come predefinito. Se volessi che il bordo-sinistra scavalchi gli altri bordi, ad esempio, avrei a che fare con alcuni float: left
e follia di elementi in linea.
The Question (finalmente)
Esiste un metodo più semplice di rimuovere la smussatura-comportamento di default osservato su tutti i browser?
Anche se il caso sopra descritto è per lo più facile avere il bordo superiore o inferiore del bordo che sovrascrive gli angoli, non è così facile, ad esempio, se ho bisogno del bordo-sinistra e del bordo-destra per scavalcare il bordo superiore e il bordo inferiore.
Questo può aiutare: http://stackoverflow.com/questions/11052202/can-i-have-different-coloured-left-and-top-borders-in-css-with-straight-join –