X Course Advisor FREE Course Advisor
(Close)
Watch Tutorials
macProVideo.com
Close

Premium Accesso libero

Accedere alla nostra libreria di articoli Hub Premium, file di progetto e il primo 10% di ogni tutorial-video dalla libreria di tutorial online .

Crea un account gratuito ora!

Creato Angoli arrotondati su oggetti Layout CSS3
Tradotto da Google Translate

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 .


Geoff Blake

Geoff Blake | Articles by this author

Geoff Blake is a book author, video presenter, designer, and visual artist. As an in demand live-on-stage software educator since 1997, Geoff has taught desktop publishing, web design and graphics courses all over North America and is regarded as an expert in Adobe's Creative Suite applications, as well as in HTML, CSS, WordPress, and related technologies. With his humorous, non-jargonny approach, Geoff produces highly regarded articles, video training and DVDs, and regularly contributes to top industry magazines and websites.

Comments

You must be logged in to post a comment.
Create an Account  Login Now

What is macProVideo.com?

macProVideo.com is an online education community featuring Tutorial-Videos & Training for popular Audio & Video Applications including Adobe CS, Logic Studio, Final Cut Studio, and more.
© 2018 macProVideo.com
a division of NonLinear Educating Inc.
Link