Hvordan kode en Fancy Border i HTML

Web-sider bruker en kombinasjon av HTML og CSS (Cascading Style Sheets) for å lage oppsett som spenner fra enkle til komplekse. Ved hjelp av CSS level 3 (CSS3) egenskaper, kan du ta med HTML og stilen den med fancy grenser. Alternativene inkluderer grense stiler som prikket eller ridged, buede hjørner og bilde grenser. Den slags grense du oppretter avhenger i stor grad på din egen fantasi.

Bruksanvisning

Opprette Basic CSS Borders

1 Åpne din webside i Notepad, slik at du kan vise og redigere sin kode. Finn ID HTML-kodene som omgir innholdet der du vil bruke grensen:

<Div id = "fancy">

Innhold...

</ Div>

2 Gå til toppen av koden og se etter "<style>" tags mellom "<head>" koder. Legg disse kodene hvis du ikke finner dem der:

<Style type = "text / css">

</ Style>

3 Sett "grensen" eiendom for målet tag, velge den ved sin ID. Gi grense verdier for sin bredde, stil og farge:

ID_NAME {

border: 10px solid black;

}

Bruk en av følgende kantlinjestiler: stiplede, prikkete, dobbel, groove, innfelt, begynnelsen, rygg eller fast.

Avrundet Corner Borders

4 Still "border-radius" eiendom under "grensen" eiendom:

border-radius: 25px;

Gi radius grensen høyere pikselverdi enn bredden av grensen du opprettet for best resultat - ellers vil grensen vise skarpe indre hjørnene.

5 Endre formen på grense kurver ved å legge til en skråstrek etter pikselverdien av "border-radius" og legge til en ekstra verdi:

border-radius: 25px / 20px;

Denne andre verdiendringer høyden på hver kurve, mens den første verdien bevirker kurvelengden.

6 Gi hvert hjørne en annen kurve ved hjelp av langhånd egenskaper i stedet for "border-radius":

border-top-venstre-radius: 25px / 20px;

Kode for hver sone følger den ovennevnte mønster.

bilde~~POS=TRUNC Borders

7 Lag et bilde for grensen i en grafikk editor. Bildet vil omfatte hvert hjørne, hver side og sentrum. Mål høyden på den øvre og nedre grense deler av grafikken. Mål bredden på venstre og høyre kantseksjoner. Still "border-width" eiendom i koden din:

border-width: 140 px 120px 120px 100px;

Hver verdi i eksemplet ovenfor representerer bredden av en side av grensen, som starter på toppen og går i tur og orden.

8 Mål bredden på hvert hjørne av grensen grafikken. Skriv "border-image" kode, inkludert URL-banen til bakgrunnsbilde og bredden på hvert hjørne. Legg til "runde" for å fortelle leseren hvordan å arrangere bitene:

border-image: URL ( 'sti / til / border.png') 140 120 120 100 runde;

Merk at disse verdiene, selv om pikselverdier, ikke bruk "px" suffiks.

9 Duplisere "border-image" kode to ganger, slik at du har tre linjer med den koden. Legg til "-moz" til den første og "-webkit" til den andre for å legge til støtte for de to nettlesere:

border-width: 140 px 120px 120px 100px;

-moz-border-image: URL ( 'border.png') 140 120 120 100 runde;

-webkit-border-image: URL ( 'border.png') 140 120 120 100 runde;

Hint

  • Som på tidspunktet for offentliggjøring, er nettleser støtter grense bilder begrenset og fortsatt i endring. Test i flere nettlesere og gi fallbacks for ikke-støtte nettlesere der det er nødvendig.