Die border-Eigenschaft des HTML <img>-Tags
Beispiel
Das folgende HTML kann verschiedene dünne und dicke Bildrahmen erzeugen:
<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>
Definition und Verwendung
Die Border-Eigenschaft des <img>-Tags legt die Breite des Rahmens um das Bild fest, das bedeutet, dass der Rahmen eines Bildes hinzugefügt oder entfernt werden kann.
Anmerkung:Standardmäßig haben Bilder keine Rahmen (es sei denn, das Bild befindet sich innerhalb eines a-Elements).
Browser zeigen normalerweise Bilder, die als Hyperlinks dargestellt werden (z.B. Bilder, die in einem <a>-Tag enthalten sind), in einer zwei Pixel breiten Rahmen an, um anzuzeigen, dass der Leser durch Auswahl dieses Bildes auf das zugehörige Dokument zugreifen kann.
Mit der Border-Eigenschaft und einem Breitenwert in Pixel kann der Rahmen (border="0") oder der Rahmen eines Bildes erweitert werden.
Achtung:Diese Eigenschaft wird in HTML 4 und XHTML ebenfalls nicht mehr empfohlen, sollte jedoch durch Styles ersetzt werden, wird aber dennoch von den populären Browsern gut unterstützt.
Browser-Unterstützung
Obwohl die Verwendung der Border-Eigenschaft nicht empfohlen wird, wird diese von allen gängigen Browsern unterstützt.
Tipp und Anmerkung
Anmerkung:HTML 4.01 empfiehlt nicht die Verwendung der "border"-Eigenschaft für Bilder. In XHTML 1.0 Strict DTD und HTML 5 wird diese Eigenschaft nicht mehr unterstützt.
Tipp:Verwenden Sie CSS-Rahmeneigenschaft Um den Rahmenstil eines Elements zu ändern. Sie können CSS-Rahmeneigenschaften in einer externen Style-Sheet verwenden, um für alle Bilder auf der Website ein einheitliches Rahmenstyle zu setzen. Im Vergleich zum Einrichten eines Rahmens für ein einzelnes Bild ist dies无疑weise effizienter.
Kompatibilitätskommentare
Die Border-Eigenschaft des img-Elements wird nicht empfohlen; in HTML 4.01 Strict und XHTML 1.0 Strict DTD wird die Eigenschaft nicht unterstützt.
Verwenden Sie CSS anstelle davon.
CSS-Syntax: <img style="border:5px solid black">
In unserem CSS-Tutorial finden Sie mehr über Border-Eigenschaft Details.
Syntax
<img border="value" />
Eigenschaftswert
| Wert | Beschreibung |
|---|---|
| pixels | Die Breite der Rahmen, in Pixel angegeben. |
TIY-Beispiel
- Border-Eigenschaft des <img>-Tags
- This example demonstrates how to use the border attribute of the <img> tag to change the image border.
Further Reading: Removing 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 does not reduce the usability of the document, you should still be careful. Because without borders, it 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 count on browsers to 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 in addition to using borderless images, so that your readers know they should click on these images. Even with simple text, it is difficult to make the document more accessible to readers.
