Creazione di angoli arrotondati utilizzando i CSS [chiuso]
https://stackoverflow.com/questions/7089
-
08-06-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianDomanda
Come posso creare angoli arrotondati usando i CSS?
Soluzione
Da quando è stato introdotto CSS3, il modo migliore per aggiungere angoli arrotondati utilizzando i CSS è utilizzare il file border-radius proprietà.Puoi leggere le specifiche sulla proprietà, o procuratene un po' informazioni utili sull'implementazione di MDN:
Se stai utilizzando un browser, questo no strumento border-radius (Chrome pre-v4, Firefox pre-v4, IE8, Opera pre-v10.5, Safari pre-v5), quindi i collegamenti sottostanti descrivono in dettaglio tutta una serie di approcci diversi.Trovane uno che si adatti al tuo sito e al tuo stile di codifica e seguilo.
Altri suggerimenti
L'ho esaminato all'inizio della creazione di Stack Overflow e non sono riuscito a trovarlo Qualunque metodo per creare angoli arrotondati che non mi dava la sensazione di aver appena camminato in una fogna.
border-radius:
Che è esattamente come vorresti che funzionasse.Anche se funziona bene nelle ultime versioni di Safari e Firefox, ma non in IE7 (e non credo in IE8) o Opera.
Nel frattempo, ci sono hack fino in fondo.Sono interessato a sapere cosa pensano gli altri sia il modo più pulito per farlo su IE7, FF2/3, Safari3 e Opera 9.5 al momento.
Generalmente ottengo gli angoli arrotondati solo con i CSS, se il browser non li supporta vedono il contenuto con angoli piatti.Se gli angoli arrotondati non sono così importanti per il tuo sito puoi utilizzare queste righe qui sotto.
Se vuoi utilizzare 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 va bene:
.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, supponendo che in futuro gli altri (si spera anche IE) decidano di implementare la funzionalità per avere il nostro stile pronto anche per loro.
Come detto in altre risposte, funziona magnificamente su Firefox, Safari, Camino, Chrome.
Se sei interessato a creare angoli in IE, questo potrebbe essere utile: http://css3pie.com/
Consiglierei di utilizzare immagini di sfondo.Gli altri modi non sono altrettanto buoni:Nessun anti-aliasing e markup insensato.Questo non è il posto giusto per usare JavaScript.
Come ha detto Brajeshwar:Usando il border-radius selettore css3.Ormai puoi candidarti -moz-border-radius E -webkit-border-radius rispettivamente per i browser basati su Mozilla e Webkit.
Allora, cosa succede con Internet Explorer?.Microsoft ha molti comportamenti per fare in modo che Internet Explorer abbia alcune funzionalità extra e acquisisca più competenze.
Qui:UN .htc file di comportamento da ottenere round-corners da border-radius valore 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 puoi inserirlo in un file CSS diverso con commenti condizionali (solo per IE).
Con il supporto per CSS3 implementato nelle versioni più recenti di Firefox, Safari e Chrome, sarà utile anche esaminare "Border Radius".
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
Come qualsiasi altra abbreviazione CSS, quella sopra può anche essere scritta in formato espanso e quindi ottenere un raggio del bordo diverso per la parte in alto a sinistra, in alto a destra, 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 lo affronterei personalmente.il supporto CSS è minimo, le immagini sono troppo complicate, essere in grado di selezionare gli elementi che si desidera avere con angoli arrotondati in jQuery ha perfettamente senso per me anche se alcuni senza dubbio sosterranno il contrario.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 poiché è puramente di stile, sono piuttosto contrario all'uso degli script client per raggiungere questo obiettivo.
Il modo che preferisco (anche se ha i suoi limiti), è usare 4 immagini con angoli arrotondati che posizionerai nei 4 angoli del tuo box usando i 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 in precedenza, ha i suoi limiti (lo sfondo dietro il riquadro arrotondato deve essere liscio altrimenti gli angoli non combaceranno con lo sfondo), ma funziona molto bene per qualsiasi altra cosa.
Aggiornato: Migliorata l'implementazione utilizzando un foglio sprite.
Personalmente preferisco questa soluzione, è un .htc per consentire a IE di eseguire il rendering dei 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 utilizzando il comando border-radius proprietà.Dato che non fa ancora ufficialmente parte delle specifiche, utilizza 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 piccoli file divs per farlo sembrare arrotondato, oppure usano bordi e margini negativi per creare angoli dentellati di 1px.Alcuni potrebbero anche utilizzare SVG in IE.
IMO, il metodo CSS è migliore, poiché è semplice e si degraderà con garbo nei browser che non lo supportano.Questo è, ovviamente, solo il caso in cui il client non li applica nei browser non supportati come IE <9.
Ecco una soluzione HTML/js/css che ho realizzato di recente.C'è un errore di arrotondamento di 1px con posizionamento assoluto in IE, quindi vuoi che il contenitore abbia un numero pari di pixel di larghezza, 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 18px e ha tutti e 4 gli angoli raggruppati insieme.Sembra un cerchio.
Nota:non è necessario il secondo involucro interno, ma mi piace usare il margine sull'involucro interno in modo che i margini sui paragrafi e sui titoli mantengano comunque il collasso dei margini.Puoi anche saltare la jquery e inserire semplicemente il wrapper interno nell'html.
A dimostrazione di quanto sia complesso far funzionare anche gli angoli arrotondati Yahoo li scoraggia (vedi primo punto dell'elenco)!Certo, in quell'articolo si parla solo di angoli arrotondati da 1 pixel, ma è interessante vedere che anche un'azienda con la loro esperienza ha concluso che sono semplicemente troppo dolorosi per farli funzionare La maggior parte delle volte.
Se il tuo progetto può sopravvivere senza di loro, questa è la soluzione più semplice.
Certo, se si tratta di una larghezza fissa, è semplicissimo usare i CSS e per nulla offensivo o laborioso.È quando è necessario che si espanda in entrambe le direzioni che le cose diventano instabili.Alcune soluzioni hanno una quantità impressionante di div impilati uno sopra l'altro per realizzarlo.
La mia soluzione è dettare al progettista che se desidera utilizzare angoli arrotondati (per il momento), deve avere una larghezza fissa.I designer adorano gli angoli arrotondati (e anch'io), quindi trovo che questo sia un compromesso ragionevole.
Confini di Ruzee è l'unica soluzione con angoli arrotondati anti-aliasing basata su Javascript che ho trovato che funziona in tutti i principali browser (Firefox 2/3, Chrome, Safari 3, IE6/7/8) e INOLTRE l'unica che funziona quando entrambi l'elemento arrotondato E l'elemento genitore contengono un'immagine di sfondo.Fa anche bordi, ombre e bagliori.
Il più recente RUZEE.ShadedBorder è un'altra opzione, ma manca il supporto per ottenere informazioni sullo stile dai CSS.
Se vuoi adottare la soluzione border-radius, c'è questo fantastico sito Web per generare il CSS che lo farà funzionare per Safari/Chrome/FF.
Ad ogni modo, penso che il tuo design non dovrebbe dipendere dagli angoli arrotondati, e se guardi Twitter, dicono semplicemente F**** agli utenti di IE e Opera.Gli angoli arrotondati sono belli da avere e personalmente sono d'accordo nel tenerli per gli utenti interessanti che non usano IE :).
Ovviamente non è l'opinione dei clienti.Ecco il link : http://border-radius.com/
Oltre alle soluzioni HTC menzionate sopra, ecco altre soluzioni ed esempi da raggiungere angoli arrotondati in IE.
Non esiste il modo "migliore";ci sono modi che funzionano per te e modi che non funzionano.Detto questo, ho pubblicato un articolo sulla creazione di una tecnica fluida per gli angoli arrotondati basata su CSS+immagine qui:
Scatola con angoli arrotondati utilizzando 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), avrai bisogno di tre DIV e tre immagini.Per un layout a larghezza fluida (larghezza e altezza estensibili) avrai bisogno di 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 sul blog qualche tempo fa, quindi per maggiori informazioni, Vedere 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 beneNon è necessario Javascript, solo CSS e HTML.Con un'interferenza minima dell'HTML con le altre cose.È molto simile a quello pubblicato da Mono, ma non contiene alcun hack specifico per IE 6 e, dopo aver controllato, non sembra funzionare affatto.Inoltre, un altro trucco consiste nel rendere trasparente la parte interna dell'immagine di ciascun angolo in modo che non blocchi il testo vicino all'angolo.La parte esterna non deve essere trasparente in modo da poter coprire il bordo del div non arrotondato.
Inoltre, una volta che CSS3 sarà ampiamente supportato con 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, dai il comandoPlug-in per la tela di sfondo jQuery un tentativo.Posiziona un elemento Canvas HTML5 sullo sfondo e ti consente di disegnare ogni sfondo o bordo che desideri.Angoli arrotondati, gradienti e così via.
Opera non supporta ancora il border-radius (a quanto pare sarà disponibile dopo la versione 10).Nel frattempo puoi usa CSS per impostare uno sfondo SVG per creare un effetto simile.
