Trasparenza in CSS più comunemente utilizza lo standard di colore RGBa, ed è possibile impostare i colori del bordo trasparente in questo modo. In RGBa, specificare valori che vanno da zero a 255 per il rosso, verde e blu. Quindi specificare un livello di trasparenza che vanno da uno per opaco e zero per invisibile. Molti designer utilizzano colori RGBa backgrounds. Applicare colori RGBa a qualsiasi proprietà CSS che può assumere un colore. Questa tecnica è pulito e semplice e non richiede incisioni di lavorare in qualsiasi browser moderno.
Istruzioni
1
Aprire il file HTML della pagina Web che contiene il contenuto che otterrà un bordo trasparente. Utilizzare un editor di codice come Notepad + +, BBEdit o jEdit. Individuare i tag che racchiudono il contenuto che si desidera inserire un bordo trasparente intorno e prendere nota del nome della classe per il tag. Se vedete nessuno, aggiungere un nome di classe in questo modo:
< div class = "myborder" > contenuto... < / div >
2
Trovare i valori di rosso, verdi e blu (RGB) per il colore trasparente che si desidera utilizzare. Utilizzare lo strumento della tavolozza colore in qualsiasi programma di grafica o un sito Web che fornisce una selezione di colori. Non è necessario il codice esadecimale.
3
Tornare al file HTML e guardare tra il < head > e < / head > Tag. Trovare un insieme di tag < style > o codice che assomiglia a questo:
< link rel = "stylesheet" href="style.css" type = "text/css" / >
Il codice sopra riportato è solo un esempio; utilizzo del tag < link > varia. Apri il. File CSS a cui fa riferimento il tag < link >, se ne hai uno, o aggiungere il codice CSS tra lo stile di < > e < / stile > Tag.
4
Digitare il seguente codice CSS, sostituendo "classname" con il nome di classe per il tuo tag HTML e i valori dei colori con i tuoi:
nomedellaclasse {border-color: rgba(255,0,0,0.5);}
Il codice sopra imposta il colore del bordo rosso e dà una trasparenza del 50 per cento.
5
Aggiungere una larghezza del bordo in questo modo:
nomedellaclasse {border-color: rgba(255,0,0,0.5); border-width: 5px;}
Modificare il numero prima di "px" per la larghezza del bordo desiderato in pixel. Qui è una proprietà CSS breve mano che unisce il colore e lo spessore:
nomedellaclasse {border: 5px solid rgba(255,0,0,0.5);
La proprietà di breve mano richiede il "border-style" così come la larghezza e il colore. Utilizzare "solido" per fare un bordo solido. Si noti che "tinta" non fa riferimento al valore della trasparenza del colore.
Consigli & Avvertenze
- Ammorbidire i bordi ancora più utilizzando la proprietà "border-radius" nel codice CSS. Questa proprietà Arrotonda gli angoli dei bordi.
- Sebbene i browser moderni non richiedono hack per rendere i bordi trasparenti funzionano, le versioni precedenti di Internet Explorer non sono compatibili con RGBa. La procedura consigliata è secondo per impostare una tinta unita prima e il colore trasparente. I browser che possono leggere RGBa utilizzerà il secondo colore del bordo. Questo metodo non si romperà il layout offrendo la migliore esperienza per i migliori browser, una pratica chiamata "progressive enhancement."