Come creare Border spazio in un immagine CSS

March 22

L'aggiunta di spazio tra un bordo e l'immagine si ottiene utilizzando la proprietà "padding" in fogli di codice CSS (Cascading Style). Quando si crea una classe per la vostra immagine, è possibile riutilizzarlo per le altre immagini sul vostro sito web e scrivere il codice CSS per creare l'effetto desiderato. Dare l'imbottitura di classe e un bordo, e quindi aggiungere un colore di sfondo, se si desidera aggiungere colore allo spazio tra l'immagine e il confine.

istruzione

1 Aprire il file per la pagina Web contenente l'immagine in Blocco note o un editor di codice. Individuare il "<img>" tag per l'immagine in cui si desidera creare lo spazio di confine:

<Img alt = "La mia immagine" />

Aggiungere un nome di classe alla vostra immagine:

<Img alt = "La mia immagine" class = "myborder" />

2 Vai alla sezione "<head>" tag del file e cercare "<style>" tag. Aggiungere questi tag se non li trovate lì:

<Style type = "text / css">

</ Style>

3 Scrivere il codice CSS tra i "<style>" tag. Obiettivo la vostra immagine con il suo nome di classe:

.myborder {}

4 Aggiungere un bordo all'immagine usando la proprietà "confine" del CSS:

.myborder {

border: 1px #bbb solido;

}

Il codice precedente crea un livello 1-pixel, solido bordo di un colore grigio medio.

5 Impostare la proprietà "padding" del CSS per la vostra immagine per creare spazio tra il bordo e l'immagine:

.myborder {

border: 1px #bbb solido;

padding: 10px;

}

Consigli e avvertenze

  • Aggiungere un colore di sfondo per la vostra immagine per dare lo spazio tra il bordo e l'immagine di un colore.
  • Aggiungi il tuo nome classe a qualsiasi altra immagine in cui si desidera utilizzare questo effetto. Il vantaggio delle classi in HTML e CSS è che si può usare qualsiasi numero di volte che ti piace.

Articoli Correlati