HTML <img> tag border eigenschap
Voorbeeld
Het volgende HTML kan verschillende dikte van afbeeldingsranden produceren:
<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>
Definitie en gebruik
De border eigenschap van de <img> tag definieert de breedte van de rand rond de afbeelding, wat betekent dat de rand van de afbeelding kan worden toegevoegd of verwijderd.
Opmerking:Standaard heeft een afbeelding geen rand (tenzij de afbeelding zich binnen een a element bevindt).
Browsers tonen meestal afbeeldingen die vertegenwoordigen hyperlinks (bijvoorbeeld afbeeldingen die zich in een <a> tag bevinden) binnen een rand van twee pixels breed, om aan te geven dat de lezer door op deze afbeelding te klikken toegang kan krijgen tot het gerelateerde document.
Met de border eigenschap en een breedte van de rand in pixels kan de rand van de afbeelding worden verwijderd (border="0") of verdikt.
Let op:Deze eigenschap wordt ook niet meer aanbevolen in HTML 4 en XHTML, en zou ook door stijlen moeten worden vervangen, maar wordt nog steeds goed ondersteund door populaire browsers.
Browserondersteuning
Hoewel het niet wordt aanbevolen om de border eigenschap te gebruiken, wordt deze eigenschap door alle主流 browsers goed ondersteund.
Tips en opmerkingen
Opmerking:Het wordt niet aanbevolen om de "border" eigenschap van de afbeelding in HTML 4.01 te gebruiken. In XHTML 1.0 Strict DTD en HTML 5 wordt deze eigenschap niet meer ondersteund.
Tip:Gebruik CSS randeigenschappen om de randstijl van het element te wijzigen. U kunt een externe stylesheet gebruiken om CSS randeigenschappen toe te passen en een consistente rand voor alle afbeeldingen op de site in te stellen. In vergelijking met het instellen van een rand voor een afzonderlijke afbeelding, heeft deze methode duidelijk een hogere efficiëntie.
Compatibiliteitsopmerking
Het wordt niet aanbevolen om de border eigenschap van het img element te gebruiken; in HTML 4.01 Strict en XHTML 1.0 Strict DTD wordt de border eigenschap van het img element niet ondersteund.
Gebruik CSS in plaats van.
CSS syntax: <img style="border:5px solid black">
CSS voorbeeld: afbeeldingsrand
In onze CSS les kunt u meer vinden over border eigenschap gedetailleerde informatie.
Syntax
<img border="waarde" />
Eigenschapswaarde
| Waarde | Beschrijving |
|---|---|
| pixels | Breedte van de rand, uitgedrukt in pixels. |
TIY voorbeeld
- Border eigenschap van de <img> tag
- This example demonstrates how to use the border attribute of the <img> tag to change the image border.
Read more: Remove image borders
By using the border="0" attribute in the <img> tag, you can remove the border around the image hyperlink. For some images, especially those image maps, not having a border may improve the appearance of the page. For those clearly indicating that they are links to other images, without a border, the image may look better.
Although removing borders will not reduce the usability of the document, you still need to be careful. Because without borders means removing a very common visual indication effect of hyperlinks, which may make readers not as easy to find these links as before. Browsers usually change the mouse pointer shape when the mouse moves over a hyperlink image, but you cannot expect that browsers will always do this, and you should not let users fumble through borderless images to find those hidden links.
We strongly recommend that you use other methods at the same time when using borderless images, so that your readers know that they should click on these images. Even with simple text, it is difficult to make the document more accessible to readers.
