May 31
Le pagine Web utilizzano una combinazione di HTML e CSS (Cascading Style Sheets) per creare layout che vanno dal semplice al complesso. Utilizzando CSS 3 proprietà (CSS3), si può prendere il codice HTML e lo stile con i bordi di fantasia. Le opzioni includono stili di confine, come tratteggiata o rigati, angoli curvi e bordi dell'immagine. Il tipo di confine si crea dipende in gran parte la propria immaginazione.
1 Aprire la pagina Web in Blocco note in modo da poter visualizzare e modificare il codice. Trovare l'ID dei tag HTML che circondano il contenuto cui si desidera applicare il bordo:
<Div id = "fantasia">
Contenuto...
</ Div>
2 Vai all'inizio del codice e cercare "<style>" tag tra i "<head>" tag. Aggiungere questi tag se non li trovate lì:
<Style type = "text / css">
</ Style>
3 Impostare la proprietà di "confine" per il tag di destinazione, selezionandolo dal suo ID. Dare i valori di confine per la sua larghezza, stile e colore:
id_name {
border: 10px solido nero;
}
Utilizzare uno dei seguenti stili di bordo: tratteggiata, punteggiata, doppio, groove, inserto, fin dall'inizio, cresta o solido.
4 Impostare la proprietà "border-radius" sotto la proprietà "confine":
border-radius: 25px;
Dare il raggio di confine un valore di pixel superiore alla larghezza del bordo creato per ottenere i migliori risultati - in caso contrario, il confine mostrerà taglienti angoli interni.
5 Modificare la forma delle curve di confine aggiungendo una barra dopo il valore del pixel "border-radius" e aggiungendo un secondo valore:
border-radius: 25px / 20px;
Questo secondo valore cambia l'altezza di ogni curva, mentre il primo valore effettua la lunghezza della curva.
6 Dare ad ogni angolo una curva diversa utilizzando le proprietà di lunga mano invece di "border-radius":
border-top-left-radius: 25px / 20px;
Codice per ogni angolo segue lo schema di cui sopra.
7 Creare un'immagine per il bordo in un editor di grafica. L'immagine includerà ogni angolo, ogni lato ed il centro. Misurare l'altezza delle sezioni superiore e inferiore di confine della grafica. Misurare la larghezza delle sezioni bordo sinistro e destro. Impostare la proprietà "border-width" nel codice:
border-width: 140px 120px 120px 100px;
Ogni valore nell'esempio sopra rappresenta la larghezza di un lato del confine, partendo dall'alto e andando in senso orario.
8 Misurare la larghezza di ogni angolo della vostra grafica confine. Scrivi il codice "border-immagine", incluso il percorso URL dell'immagine di sfondo e la larghezza di ogni angolo. Aggiungere "rotonda" per dire al browser come organizzare i pezzi:
border-immagine: URL ( 'path / to / border.png') 140 120 120 100 rotonda;
Si noti che questi valori, anche se i valori dei pixel, non usano il suffisso "px".
9 Duplicare il codice "border-immagine" due volte, in modo da avere tre righe di tale codice. Aggiungere "moz" alla prima e "-webkit" al secondo per aggiungere il supporto per questi due browser:
border-width: 140px 120px 120px 100px;
-moz-border-immagine: URL ( 'border.png') 140 120 120 100 rotonda;
-webkit-border-immagine: URL ( 'border.png') 140 120 120 100 rotonda;