HTML <img>-tags border-egenskab

HTML <img> etiket

Eksempel

Følgende HTML kan generere forskellige tykkelsesbokstaver for bilderrammer:

<html>
<body>
<a href="/index.html">
<img src="/i/eg_logo_codew3c.gif" border="1" />
</a>
<br />
<a href="/index.html">
<img src="/i/eg_logo_codew3c.gif" border="2" />
</a>
<br />
<a href="/index.html">
<img src="/i/eg_logo_codew3c.gif" border="4" />
</a>
<br />
<a href="/index.html">
<img src="/i/eg_logo_codew3c.gif" border="8" />
</a>
</body>
</html>

Prøv det selv

Definition og brug

border egenskaben for <img>-tagget definerer billedets kantbredde omkring billedet, hvilket betyder, at man kan tilføje eller fjerne billedets kant.

Bemærkninger:Standardmæssigt har billeder ingen kant (medmindre billedet er indeholdt i et <a>-element).

Browsere viser normalt billeder, der repræsenterer hyperlinks (f.eks. billeder indeholdt i <a>-tagget), inden for en to pixels bred kant for at vise, at læseren kan vælge dette billede for at få adgang til det tilhørende dokument.

Brug af border egenskab og en breddeværdi i pixels kan fjerne (border="0") eller udvide billedets kant.

Bemærk:Egenskaben anbefales ikke længere i HTML 4 og XHTML, og bør også erstattes af stil, men den understøttes stadig godt af populære browsere.

Udvidet læsning: Fjernelse af billedkantene

Browserv understøttelse

Selvom det ikke anbefales at bruge border egenskaben, understøtter alle主流 browsere egenskaben.

Tips og bemærkninger

Bemærkninger:HTML 4.01 anbefaler ikke brug af billedets "border" egenskab. I XHTML 1.0 Strict DTD og HTML 5 understøttes egenskaben ikke længere.

Tip:Brug venligst CSS kantegenskab for at ændre elementets kantstyle. Du kan bruge CSS kantegenskaben i en ekstern stilark for at sætte en konsistent kant for alle billeder på dit websted. I sammenligning med at sætte kantegenskaben for et enkelt billede, er dette måde at gøre det uden tvivl mere effektivt.

Kompatibilitetskommentarer

Det anbefales ikke at bruge img elementets border egenskab; i HTML 4.01 Strict samt XHTML 1.0 Strict DTD understøttes egenskaben ikke for img elementet.

Brug venligst CSS i stedet.

CSS syntaks: <img style="border:5px solid black">

CSS eksempel: Billedkant

I vores CSS undervisning kan du finde mere om border egenskab detaljerne.

Syntaks

<img border="value" />

Egenskabsværdi

Værdi Beskrivelse
pixels Bjældekraftens bredde, i pixels.

TIY eksempel

Tagget <img>’s border egenskab
Dette eksempel viser, hvordan man bruger <img>-etikettens border-egenskab til at ændre billedets kant.

Udvidet læsning: Fjernelse af billedkantene

Ved at bruge border="0"-egenskaben i <img>-etiketten kan man fjerne kanterne omkring et hyperlink-billede. For nogle billeder, især dem, der er billedkort, kan det uden kanter forbedre udseendet af siden. For dem, der klart indikerer, at de peger på andre billeder, kan det uden kanter gøre billedet bedre.

Selvom fjernelse af kanter ikke reducerer dokumentets brugbarhed, skal du alligevel være forsigtig. Fordi uden kanter betyder det, at man fjerner en meget almindelig visuel indikation af hyperlinks, hvilket kan gøre det sværere for læserne at finde disse links. Browseren ændrer ofte musepegelet, når den bevæger sig over et hyperlink-billede, men man kan ikke forvente, at browseren altid gør dette, og det er heller ikke rimeligt at lade brugerne føle sig forvirrede på billeder uden kanter, hvor de skal finde de skjulte links.

Vi anbefaler kraftigt, at du bruger andre metoder sammen med ubeskyrede billeder, så dine læsere ved, at de skal klikke på disse billeder. Selv med simpel tekst er det svært at gøre dokumentet mere tilgængeligt for læserne.

HTML <img> etiket