Bordi dell'immagine sono un modo semplice per fare le vostre immagini spiccano sul tuo sito Web. CSS è un mezzo efficace per regolare il vostro dai bordi dell'immagine, perché ti permette di modificare tutte le immagini in una sola volta o selezionare solo alcune immagini in tutto il sito. È possibile aggiornare i bordi dell'immagine senza dover visitare ogni o aprire l'editor di foto. Perché il confine è in CSS e non fa parte della fotografia, la qualità non è diminuita di ottimizzazione.

Preset di confine CSS

CSS offre bordo preimpostato che è possibile applicare alle vostre immagini, utilizzando il codice di formattazione "border-style:" e mettere lo stile nome, o valore, dopo i due punti. Utilizzare questi per impostare contemporaneamente tutti e quattro i bordi. Alcuni valori sono "sparsi", "tratteggiato", "solido", "double", "groove," "ridge," "incasso" e "inizio" (vedi riferimenti). Un esempio di questo codice è: {border-style: ridge;}.

Impostazione manuale di bordo

Predefiniti non sono l'unica opzione. Impostare i vostri confini manualmente, styling tutti i lati con "confine:" e compreso il formato dopo i due punti. Un esempio è: {border: 2px solid #00FFFF;}. Questo vi darà un bordo a tinta unita con uno spessore di 2 pixel in un brillante colore blu/verde.

Ogni lato di colore

È possibile impostare i lati singoli bordi, regolazione del colore e lo spessore di ciascuno. È possibile impostare left e top i lati un colore più chiaro rispetto ai lati destro e inferiore. Questo vi darà l'aspetto dell'immagine viene generato come un pulsante. Un esempio è:

{border-top:2px solid #B49B82;

border-left:2px solid #B49B82;

border-bottom:2px solid #603A00;

border-right:2px solid #603A00;}

Impostare la spaziatura interna

In tutti questi esempi è possibile impostare un altro attributo, «riempimento». Impostare il colore di riempimento con l'attributo "background-color". Usando questo può apparire simile a foto stuoia, aggiungendo profondità e un'altra area di coordinare colori con lo schema generale del tuo sito o solo una pagina. Utilizzare le seguenti righe di codice per impostare la spaziatura interna:

{padding: 1px;

background-color: #FF0;}

Identificazione delle immagini

Impostazione di bordi utilizzando CSS consente di scegliere alcuni o tutti di stile. Selezionare le immagini dando loro un ID specifico (#img) o il nome della classe (. img). Per più di un'immagine su una pagina, utilizzare la classe, poiché si possono avere più tag utilizzare la stessa classe su una pagina Web. Per una sola immagine nella pagina, è possibile utilizzare un ID per il nome; un solo tag può avere quel nome di ID per ogni pagina.

Avviso

Browser a volte il rendering a stili di bordo in modo diverso, quando è utilizzare i preset. Impostazione manuale delle frontiere ti dà un aspetto più coerente tra i vari browser.

Tutti gli attributi del bordo di immagine devono essere all'interno dell'immagine di classe o ID.

Due siti Web che possono aiutarti con la raccolta di colore sono nell'area risorse.