Hvordan lage Indre og Ytre Grenser i CSS

Hvert element på en webside er i stand til å vise en grense hvis du kode det i CSS. Grenser kan komme i hvilken som helst farge eller bredden du vil ha, og det er mulig å selv kurve dem. Doble grenser ta litt mer arbeid fordi hvert element kan bare ha én grensen. Mens du kan pakke den inn i en ekstra div i HTML-koden, en langt renere og penere måte å anvende en indre og ytre grense er med psuedo-elementer. I CSS, er pseudo-elementer laget ved å lage stilregler innledes med ": etter" eller ". Før"

Bruksanvisning

1 Åpne HTML-filen i et redigeringsprogram - Notepad vil gjøre, men en line-nummerert kode editor som fungerer best - og finne den "<div>" innpakning innholdet som trenger grenser. Du kan også legge til kodene hvis de er ennå ikke i koden, og gi dem en unik ID navn:

<Div id = "my_borders">
Innhold...
</ Div>

2 Åpne stilark fil for din webside eller plassere CSS-kode mellom "<style>" koder i hodet av HTML-koden:

<Style type = "text / css">
</ Style>

3 Skriv en stil regel for div og gi det en grense. Gjør dette til din indre kant:

my_borders {

border: 3px solid rød;
}

Endre pikselverdien til bredden du ønsker for grensen, og endre "rød" til en annen farge navn eller heksadesimale fargekoden du vil bruke.

4 Lag en pseudo-element for å gjøre utenfor grensen:

my_borders: etter {

innhold: '';
}

Denne stilen regelen skaper en ny div som ikke er i HTML, men leseren vil behandle det som om det er der.

5 Style den pseudo-element så det går bak div:

my_borders: etter {

position: absolute;
z-index: -10;
}

6 Strekk psuedo-element for å passe rundt den indre grensen og flytte den opp:

my_borders: etter {

position: absolute;
z-index: -10;
padding: 3px;
top: -3px;
venstre: -3px;
}

Den "padding" verdien her er lik bredden av den indre kantlinje, og denne strekker seg størrelsen av div. Flytte pseudo-element tre piksler opp fra toppen og tre piksler til høyre sentre den over den indre grensen.

7 Stil grensen av psuedo-element for å lage din ytre kant:

my_borders: etter {

position: absolute;
z-index: -10;
padding: 3px;
top: -3px;
venstre: -3px;
border: 10px blått;
}