HTML <img> 标签的 border 属性

HTML <img> 标签

实例

下面的 HTML 可以产生不同粗细的图像边框：

  1. <html>
  3. <body>
  4. <a href="/index.html">
  5. <img src="/static/images/logo.png" border="1" />
  6. </a>
  8. <br />
  10. <a href="/index.html">
  11. <img src="/static/images/logo.png" border="2" />
  12. </a>
  14. <br />
  16. <a href="/index.html">
  17. <img src="/static/images/logo.png" border="4" />
  18. </a>
  20. <br />
  22. <a href="/index.html">
  23. <img src="/static/images/logo.png" border="8" />
  24. </a>
  25. </body>
  27. </html>

定义和用法

<img> 标签的 border 属性规定图像周围的边框的宽度，就是说可以增加或去掉图像的边框。

注释：默认地，图像是没有边框的（除非图像在 a 元素内部）。

浏览器通常会把代表超链接的图像（例如包含在 <a> 标签中的图像）显示在两个像素宽的边框里面，以表示读者可以通过选择这个图像来访问相关联的文档。

使用 border 属性和一个用像素表示的宽度值就可以去掉 (border=”0”) 或加宽图像的边框。

注意：该属性在 HTML 4 和 XHTML 中也不再被推荐使用了，同样是应该被样式所代替，但却依然被流行浏览器很好地支持着。

浏览器支持

尽管不推荐使用 border 属性，但是所有主流浏览器均支持该属性。

提示和注释

注释：HTML 4.01 不推荐使用图像的 “border” 属性。在 XHTML 1.0 Strict DTD 和 HTML 5 中，不再支持该属性。

提示：请使用 CSS 的边框属性 来改变元素的边框样式。您可以在一个外部样式表中使用 CSS 边框属性，为站点上的所有图像设置一致的边框。与单独为一个图像设置 border 属性相比，这种方式无疑拥有更高的效率。

兼容性注释

不推荐使用 img 元素的 border 属性；在 HTML 4.01 Strict 以及 XHTML 1.0 Strict DTD 中，不支持 img 元素的 border 属性。

请使用 CSS 代替。

CSS 语法：<img style="border:5px solid black">

CSS 实例：图像边框

  1. <img src ="/uploads/202305/175dd2a57efd648c.jpg" style="border:5px solid black" />

在我们的 CSS 教程中，您可以找到更多有关 border 属性 的细节。

语法

  1. <img border="value" />

属性值

值 描述
pixels 边框的宽度，以像素为单位。

延伸阅读：去掉图像的边框

通过在 <img> 标签中使用 border=”0” 属性，就可以把图像超链接周围的边框去掉。对于某些图像，尤其是那些图像映射来说，没有边框可能会使页面的外观得到改善。而对于那些清楚地表示是指向其他图像的链接按钮，如果没有边框，图像看上去可能会更好。

虽然去掉边框不会降低文档的可用性，但还是要多加小心。因为没有边框就意味着去掉了一种非常常见的超链接视觉指示效果，这使得读者可能不会像原来那么很容易就可以找到这些链接。浏览器通常会在鼠标移动到超链接图像上的时候改变鼠标指针的形状，但是不能指望浏览器一定会这样做，更不应该让用户在没有边框的图像上摸索，已找到那些隐藏的链接。

我们强烈推荐你在使用无边框图像时，最好同时使用其他方法，以便你的读者知道应该在这些图像上单击。即使使用简单的文字，也很难使文档对于读者来说具有更好的可访问性。