Creazione di angoli arrotondati utilizzando CSS [chiuso]

Come posso creare angoli arrotondati usando CSS?

Da quando è stato introdotto CSS3, il modo migliore per aggiungere angoli arrotondati usando CSS è usando la border-radiusproprietà Puoi leggere le specifiche sulla proprietà o ottenere utili informazioni di implementazione su MDN :

Se stai utilizzando un browser che non implementa border-radius (Chrome pre-v4, Firefox pre-v4, IE8, Opera pre-v10.5, Safari pre-v5), i link sottostanti descrivono in dettaglio un sacco di approcci diversi. Trova quello che si adatta al tuo sito e allo stile di codifica e seguilo.

1. Progettazione CSS: creazione di angoli e bordi personalizzati
2. CSS Rounded Corners 'Roundup'
3. 25 tecniche di angoli arrotondati con CSS

Ho iniziato così presto nella creazione di Stack Overflow e non sono riuscito a trovare alcun metodo per creare angoli arrotondati che non mi facesse sentire come se avessi appena attraversato una fogna.

CSS3 definisce finalmente il

border-radius:

È esattamente come vorresti che funzionasse. Anche se questo funziona bene nelle ultime versioni di Safari e Firefox, ma non lo è affatto in IE7 (e non penso in IE8) o Opera.

Nel frattempo, sono hack fino in fondo. Sono interessato a sentire quello che gli altri pensano sia il modo più pulito per farlo su IE7, FF2 / 3, Safari3 e Opera 9.5 al momento.

In genere ottengo angoli arrotondati solo con CSS, se il browser non supporta vedono il contenuto con angoli piatti. Se gli angoli arrotondati non sono così importanti per il tuo sito, puoi utilizzare queste linee di seguito.

Se vuoi usare tutti gli angoli con lo stesso raggio, questo è il modo più semplice:

.my_rounded_corners{
   -webkit-border-radius: 5px;
           border-radius: 5px;
}

ma se vuoi controllare ogni angolo questo è buono:

.my_rounded_corners{
    border: 1px solid #ccc;

    /* each value for each corner clockwise starting from top left */
    -webkit-border-radius: 10px 3px 0 20px;
            border-radius: 10px 3px 0 20px;
}

Come vedi in ogni set hai stili specifici del browser e nella quarta riga dichiariamo in modo standard da questo assumiamo se in futuro gli altri (speriamo anche IE) decidano di implementare la funzionalità per avere il nostro stile pronto anche per loro.

Come detto in altre risposte, funziona perfettamente su Firefox, Safari, Camino, Chrome.

Se sei interessato a creare angoli in IE, questo potrebbe essere utile - http://css3pie.com/

Consiglierei di usare immagini di sfondo. Gli altri modi non sono altrettanto buoni: nessun anti-aliasing e markup insensato. Questo non è il posto dove usare JavaScript.

Come Brajeshwar ha detto: utilizzando il border-radiusselettore css3. Ormai, puoi applicare -moz-border-radiuse -webkit-border-radius, rispettivamente, per i browser basati su Mozilla e Webkit.

Quindi, cosa succede con Internet Explorer? Microsoft ha molti comportamenti per far sì che Internet Explorer abbia alcune funzionalità extra e acquisisca più competenze.

Qui: un .htcfile di comportamento da ottenere round-cornersdal border-radiusvalore nel tuo CSS. Per esempio.

div.box {
    background-color: yellow; 
    border: 1px solid red; 
    border-radius: 5px; 
    behavior: url(corners.htc);
}

Naturalmente, il selettore di comportamento non è un selettore valido, ma è possibile inserirlo in un altro file CSS con commenti condizionali (solo per IE).

Il comportamento del file HTC

Con il supporto per CSS3 implementato nelle versioni più recenti di Firefox, Safari e Chrome, sarà anche utile guardare "Border Radius".

-moz-border-radius: 10px;  
-webkit-border-radius: 10px;  
border-radius: 10px;

Come qualsiasi altra scorciatoia CSS, quanto sopra può anche essere scritto in formato espanso, e quindi ottenere diversi raggi di confine per la parte superiore, dritta, ecc.

-moz-border-radius-topleft: 10px;  
-moz-border-radius-topright: 7px;  
-moz-border-radius-bottomleft: 5px;  
-moz-border-radius-bottomright: 3px;  
-webkit-border-top-right-radius: 10px;  
-webkit-border-top-left-radius: 7px;  
-webkit-border-bottom-left-radius: 5px;  
-webkit-border-bottom-right-radius: 3px;

jQuery è il modo in cui mi occuperei di questo personalmente. Il supporto CSS è minimo, le immagini sono troppo complicate, per essere in grado di selezionare gli elementi che si desidera avere angoli arrotondati in jQuery ha perfettamente senso per me anche se alcuni senz'altro sostengono diversamente. C'è un plugin che ho usato di recente per un progetto al lavoro qui: http://plugins.jquery.com/project/jquery-roundcorners-canvas

C'è sempre il modo JavaScript (vedi altre risposte) ma dato che è puramente stilistico, sono un po 'contrario all'utilizzo di script client per raggiungere questo obiettivo.

Il modo in cui preferisco (anche se ha i suoi limiti), è usare 4 immagini degli angoli arrotondati che posizionerai nei 4 angoli del riquadro usando CSS:

<div class="Rounded">
  <!-- content -->
  <div class="RoundedCorner RoundedCorner-TopLeft"></div>
  <div class="RoundedCorner RoundedCorner-TopRight"></div>
  <div class="RoundedCorner RoundedCorner-BottomRight"></div>
  <div class="RoundedCorner RoundedCorner-BottomLeft"></div>
</div>

/********************************
* Rounded styling
********************************/

.Rounded {
  position: relative;
}

.Rounded .RoundedCorner {
  position: absolute;
  background-image: url('SpriteSheet.png');
  background-repeat: no-repeat;
  overflow: hidden;

  /* Size of the rounded corner images */
  height: 5px;
  width: 5px;
}

.Rounded .RoundedCorner-TopLeft {
  top: 0;
  left: 0;

  /* No background position change (or maybe depending on your sprite sheet) */
}

.Rounded .RoundedCorner-TopRight {
  top: 0;
  right: 0;

  /* Move the sprite sheet to show the appropriate image */
  background-position: -5px 0;
}

/* Hack for IE6 */
* html .Rounded .RoundedCorner-TopRight {
  right: -1px;
}

.Rounded .RoundedCorner-BottomLeft {
  bottom: 0;
  left: 0;

  /* Move the sprite sheet to show the appropriate image */
  background-position: 0 -5px;
}

/* Hack for IE6 */
* html .Rounded .RoundedCorner-BottomLeft {
  bottom: -20px;
}

.Rounded .RoundedCorner-BottomRight {
  bottom: 0;
  right: 0;

  /* Move the sprite sheet to show the appropriate image */
  background-position: -5px -5px;
}

/* Hack for IE6 */
* html .Rounded .RoundedCorner-BottomRight {
  bottom: -20px;
  right: -1px;
}

Come accennato, ha i suoi limiti (lo sfondo dietro la casella arrotondata dovrebbe essere semplice altrimenti gli angoli non corrisponderanno allo sfondo), ma funziona molto bene per qualsiasi altra cosa.

Aggiornato: migliorata la protesi usando un foglio sprite.

Personalmente mi piace questa soluzione la migliore, è un .htc per consentire a IE di rendere i bordi curvi.

http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser

In Safari, Chrome, Firefox> 2, IE> 8 e Konquerer (e probabilmente altri) puoi farlo in CSS usando la border-radiusproprietà. Poiché non è ancora ufficialmente parte delle specifiche, si prega di utilizzare un prefisso specifico del fornitore ...

Esempio

#round-my-corners-please {
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}

Le soluzioni JavaScript generalmente aggiungono un mucchio di piccole divs per renderle arrotondate, oppure usano bordi e margini negativi per creare angoli dentellati di 1px. Alcuni possono anche utilizzare SVG in IE.

IMO, il modo CSS è migliore, in quanto è facile e si degraderà con grazia nei browser che non lo supportano. Questo è, ovviamente, solo il caso in cui il client non li impone in browser non supportati come IE <9.

Ecco una soluzione HTML / js / css che ho fatto di recente. C'è un errore di arrotondamento di 1px con posizionamento assoluto in IE, quindi vuoi che il contenitore sia largo un numero pari di pixel, ma è abbastanza pulito.

HTML:

<div class="s">Content</div>

jQuery:

$("div.s")
.wrapInner("<div class='s-iwrap'><div class='s-iwrap2'>")
.prepend('<div class="tr"/><div class="tl"/><div class="br"/><div class="bl"/>');

CSS:

/*rounded corner orange box - no title*/
.s {
    position: relative;
    margin: 0 auto 15px;
    zoom: 1;
}

.s-iwrap {
    border: 1px solid #FF9933;
}

.s-iwrap2 {
    margin: 12px;
}

.s .br,.s .bl, .s .tl, .s .tr {
    background: url(css/images/orange_corners_sprite.png) no-repeat;
    line-height: 1px;
    font-size: 1px;
    width: 9px;
    height: 9px;
    position: absolute;
}

.s .br {
    bottom: 0;
    right: 0;
    background-position: bottom right;
}

.s .bl {
    bottom: 0;
    left: 0;
    background-position: bottom left;
}

.s .tl {
    top: 0;
    left: 0;
    background-position: top left;
}

.s .tr {
    top: 0;
    right: 0;
    background-position: top right;
}

L'immagine è larga solo 18 pixel e ha tutti e 4 gli angoli messi insieme. Sembra un cerchio.

Nota: non è necessario il secondo wrapper interno, ma mi piace usare il margine sul wrapper interno in modo che i margini su paragrafi e intestazioni mantengano comunque il collasso dei margini. Puoi anche saltare il jquery e semplicemente inserire il wrapper interno nell'html.

Come indicazione di quanto sia complesso far funzionare gli angoli arrotondati, persino Yahoo li scoraggia (vedi il primo punto puntato)! Certo, stanno parlando solo di angoli arrotondati di 1 pixel in quell'articolo, ma è interessante vedere che anche un'azienda con la loro esperienza ha concluso che sono troppo dolorose per farli lavorare la maggior parte del tempo.

Se il tuo design può sopravvivere senza di loro, questa è la soluzione più semplice.

Certo, se è una larghezza fissa, è super facile usare i CSS e per nulla offensivo o laborioso. È quando ne hai bisogno per scalare in entrambe le direzioni che le cose diventano instabili. Alcune delle soluzioni hanno una quantità sbalorditiva di div accatastati l'uno sull'altro per farlo accadere.

La mia soluzione è dettare al progettista che se vogliono usare gli angoli arrotondati (per il momento), deve avere una larghezza fissa. I designer adorano gli angoli arrotondati (anche io), quindi trovo che questo sia un ragionevole compromesso.

Ruzee Borders è l'unica soluzione angolare arrotondata anti-alias basata su Javascript che ho trovato che funziona in tutti i principali browser (Firefox 2/3, Chrome, Safari 3, IE6 / 7/8) e ANCHE l'unica che funziona quando sia l'elemento arrotondato che l'elemento genitore contengono un'immagine di sfondo. Fa anche bordi, ombre e luci.

La nuova RUZEE.ShadedBorder è un'altra opzione, ma manca il supporto per ottenere informazioni di stile dai CSS.

Se vuoi andare con la soluzione border-radius, c'è questo fantastico sito Web per generare i CSS che lo faranno funzionare per Safari / Chrome / FF.

Ad ogni modo, penso che il tuo design non dovrebbe dipendere dall'angolo arrotondato, e se guardi Twitter, dicono semplicemente F **** a IE e agli utenti dell'opera. Gli angoli arrotondati sono belli da avere, e personalmente sto bene conservandolo per gli utenti fantastici che non usano IE :).

Ora ovviamente non è l'opinione dei clienti. Ecco il link: http://border-radius.com/

All'aggiunta delle soluzioni htc menzionate sopra, ecco altre soluzioni ed esempi per raggiungere gli angoli arrotondati in IE .

Non esiste un modo "migliore"; ci sono modi che funzionano per te e modi che non lo fanno. Detto questo, ho pubblicato un articolo sulla creazione di una tecnica fluida, basata su CSS + Image, qui:

Scatola con angoli arrotondati con CSS e immagini - Parte 2

Una panoramica di questo trucco è quella che utilizza DIV nidificati e ripetizione e posizionamento dell'immagine di sfondo. Per i layout a larghezza fissa (altezza estensibile a larghezza fissa), sono necessari tre DIV e tre immagini. Per un layout a larghezza fluida (larghezza ed altezza estensibili) sono necessari nove DIV e nove immagini. Alcuni potrebbero considerarlo troppo complicato, ma IMHO è la soluzione più accurata di sempre. Nessun hack, nessun JavaScript.

Ho scritto un articolo di blog su questo un po 'di tempo fa, quindi per maggiori informazioni, vedi qui

<div class="item_with_border">
    <div class="border_top_left"></div>
    <div class="border_top_right"></div>
    <div class="border_bottom_left"></div>
    <div class="border_bottom_right"></div>
    This is the text that is displayed
</div>

<style>
    div.item_with_border
    {
        border: 1px solid #FFF;
        postion: relative;
    }
    div.item_with_border > div.border_top_left
    {
        background-image: url(topleft.png);
        position: absolute;
        top: -1px;
        left: -1px;     
        width: 30px;
        height: 30px;
        z-index: 2;
    }
    div.item_with_border > div.border_top_right
    {
        background-image: url(topright.png);
        position: absolute;
        top: -1px;
        right: -1px;        
        width: 30px;
        height: 30px;
        z-index: 2;
    }
    div.item_with_border > div.border_bottom_left
    {
        background-image: url(bottomleft.png);
        position: absolute;
        bottom: -1px;
        left: -1px;     
        width: 30px;
        height: 30px;
        z-index: 2;
    }
    div.item_with_border > div.border_bottom_right
    {
        background-image: url(bottomright.png);
        position: absolute;
        bottom: -1px;
        right: -1px;        
        width: 30px;
        height: 30px;
        z-index: 2;
    }   
</style>

Funziona abbastanza bene. Non è necessario Javascript, solo CSS e HTML. Con HTML minimo che interferisce con le altre cose. È molto simile a quello pubblicato da Mono, ma non contiene alcun hack specifico per IE 6 e, dopo aver verificato, non sembra funzionare affatto. Inoltre, un altro trucco è quello di rendere trasparente la porzione interna di ogni angolo in modo che non blocchi il testo vicino all'angolo. La parte esterna non deve essere trasparente in modo da coprire il bordo del div non arrotondato.

Inoltre, una volta che CSS3 sarà ampiamente supportato da border-radius, questo sarà il modo migliore ufficiale per realizzare angoli arrotondati.

Non usare CSS, jQuery è stato menzionato più volte. Se hai bisogno del pieno controllo dello sfondo e del bordo dei tuoi elementi, prova il plugin jQuery Background Canvas . Posiziona un elemento HTML5 Canvas sullo sfondo e ti consente di disegnare ogni sfondo o bordo desiderato. Angoli arrotondati, gradienti e così via.

Opera non supporta ancora border-radius (apparentemente sarà nella versione successiva alla versione 10). Nel frattempo, puoi usare i CSS per impostare uno sfondo SVG per creare un effetto simile .