Pagine Web utilizzare una combinazione di HTML e CSS (Cascading Style Sheets) per creare layout che spaziano dai più semplici ai più complessi. Utilizzando CSS livello 3 (CSS3) proprietà, si può prendere il codice HTML e lo stile con bordi fantasia. Opzioni includono gli stili dei bordi come punteggiate o striate, curvo angoli e bordi dell'immagine. Il tipo di bordo che si crea dipende in gran parte dalla vostra immaginazione.
Istruzioni
Creazione di bordi CSS di base
1
Aprire la pagina Web in blocco note, quindi è possibile visualizzare e modificare il suo codice. Trovare l'ID di tag HTML che circondano il contenuto a cui si desidera applicare il bordo:
< div id = "fantasia" >
Contenuto...
< / div >
2
Vai all'inizio del codice e cercare il tag "< style >" tra i tag "< head >". Se non li trovi lì, aggiungere questi tag:
< style type = "text/css" >
< / stile >
3
Impostare la proprietà di "frontiera" per il tag target, selezionandolo dal relativo ID. Dare i valori di confine per la sua larghezza, stile e colore:
id_name () {
confine: 10px nero a tinta unita;
}
Utilizzare uno dei seguenti stili di bordo: tratteggiata, punteggiata, matrimoniale, groove, inserto, inizio, cresta o solido.
Angolo arrotondato bordi
4
Impostare la proprietà "border-radius" sotto la proprietà di "confine":
border-radius: 25px;
Dare il border radius un valore di pixel superiore rispetto alla larghezza del bordo che è stato creato per ottenere i migliori risultati..--altrimenti, il bordo mostrerà angoli interni taglienti.
5
Modificare la forma delle curve di bordo aggiungendo una barra dopo il valore del pixel del "border-radius" e aggiungendo un secondo valore:
border-radius: 25px / 20px;
Questo secondo valore cambia l'altezza di ogni curva, mentre il primo valore effetti la lunghezza della curva.
6
Dare 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.
Bordi dell'immagine
7
Creare un'immagine per il bordo in una grafica editor. L'immagine comprenderà ogni angolo, ogni lato e al centro. Misurare l'altezza della sezione di bordo superiore e inferiore dell'immagine. Misurare la larghezza delle sezioni bordo sinistro e destro. Impostare la proprietà "border-width" nel codice:
larghezza del bordo: 140px 120px 120px 100px;
Ogni valore nell'esempio precedente rappresenta la larghezza di un lato del bordo, partendo dall'alto e andando in senso orario.
8
Misurare la larghezza di ogni angolo del vostro confine grafico. Scrivere il codice "border-image", incluso il percorso URL per l'immagine di sfondo e la larghezza di ogni angolo. Aggiungere "rotondo" per dire al browser come disporre i pezzi:
confine-immagine: URL('path/to/border.png') 140 120 120 100 rotondo;
Si noti che questi valori, anche se i valori dei pixel, non utilizzare il suffisso "px".
9
Duplicare il codice "border-image" due volte, quindi si dispone di tre linee di tale codice. Aggiungere "-moz" per il primo e "-webkit" al secondo per aggiungere il supporto per questi due browser:
larghezza del bordo: 140px 120px 120px 100px;
-moz-border-image: URL('border.png') 140 120 120 100 rotondo;
-webkit-border-image: URL('border.png') 140 120 120 100 rotondo;
Consigli & Avvertenze
- A partire dal momento della pubblicazione, supporto del browser di immagini di frontiera è limitata e ancora cambiando. Prova in più browser e fornire i fallback per non sostenere browser ove necessario.