All Articles Web
Creato Angoli arrotondati su oggetti Layout CSS3
Geoff Blake on Thu, April 21st 0 comments
If you haven't been doing much reading up yet on what's new in CSS3, it's pretty awesome. There are all sorts of newly introduced possibilities, including gradients, multiple columns, border images, a

Se non avete fatto molto leggere ancora su che cosa c'è di nuovo in CSS3 , è abbastanza impressionante. Ci sono tutti i tipi di possibilità di recente introduzione, tra sfumature, più colonne, le immagini di frontiera, e uno parleremo un'occhiata qui, raggio di confine. Raggio di confine ci permette di impostare gli angoli arrotondati in caso contrario gli oggetti rettangolari nel nostro layout web.

Current versions of each popular browser support the new border radius property, but unfortunately it simply doesn't render in earlier versions. And that's the thorn in many web designer's side. However, I'll show you a cool trick to ensure it works in nearly every browser.

Fase 1 - Applicazione di un CSS3 Raggio di confine

Per prima cosa, applicare raggio di confine. Nel foglio di stile, trovare la regola che si desidera applicare l'effetto angolo arrotondato al. Spesso, questo sarà un selettore ID che controlla un elemento div. Assicurarsi inoltre che si sta applicando anche un colore di sfondo o un bordo (o entrambi) in modo da poter vedere gli angoli!

Successivamente, aggiungere il "raggio di confine" di proprietà al governo, seguito da un valore. Più alto è il valore che si utilizzano, più girato l'angolo.

Ecco, sto applicando il raggio di confine al mio # Content ID selettore, che controlla il div che contiene il mio contenuto della pagina, come potete vedere nella schermata incluso. Assicurati di salvare il lavoro e controllare il vostro lavoro nel tuo browser.

Se siete ancora ottenere angoli di 90 gradi, allora il browser è uno che non supporta questa funzione. Ma non le cose in confezione ancora. Vediamo che il trucco fresco ho menzionato in precedenza.

Fase 2 - garantire l'effetto angolo arrotondato Lavori

Come detto, solo le ultime versioni dei browser più comuni sostegno raggio CSS3 di proprietà di confine. Così come si può garantire che il layout funziona per gli utenti che utilizzano ancora i browser che sono una versione o due indietro? È possibile utilizzare un codice aggiuntivo, come segue.

Per prima cosa, aggiungiamo in "-moz-border-radius:" seguito da un valore di raggio. Tale traguardo è ciò che è indicato come browser Gecko - in particolare FireFox.

Poi, aggiungiamo in "-webkit-border-radius:" seguito dal valore stesso che abbiamo usato in precedenza. Questo ci ha colpito tutti i browser basati su WebKit, come Chrome e Safari. Una volta aggiunto, salvare il vostro lavoro e aggiorna il browser.

Fase 3 - L'eccezione conferma la regola

Ora quello che su Internet Explorer, il browser preferito ogni web designer (sic), vi chiederete? Ebbene, tutte le opzioni di cui sopra non funzionerà. Infatti, il codice che abbiamo aggiunto fino a questo punto sarà semplicemente ignorato da Explorer e angoli semplicemente rendere nella loro impostazione predefinita di 90 gradi styling, che è meglio che avere la pausa, giusto?! E 'possibile tirare fuori gli angoli arrotondati in IE, ma sappiamo che è un po' di lavoro extra, e forse questo è qualcosa che potremmo entrare in una punta futuro. Per il momento, però, godetevi il vostro angoli arrotondati in tutti gli altri browser!

CSS è meraviglioso. Scopri di più su Progettare Floating layout CSS .


Comments (0)

You must be logged in to comment. Login Now

Feedback
Course Advisor
Don't Know Where To Start?
Ask A Course Advisor
Ask Us!
Copy the link below and paste it into an email, forum, or Facebook to share this with your friends.
Make money when you share our links
Become a macProVideo.com Affiliate!
The current affiliate rate is: 50%
Classes Start Next Week!
Live 8-week Online Certification Classes for: