Thuộc tính border của thẻ <img> HTML

Thẻ <img> HTML

Mẫu

HTML này có thể tạo ra viền hình ảnh có độ dày khác nhau:

<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>

亲自试一试

定义和用法

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

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

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

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

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

Đọc thêm: Loại bỏ viền hình ảnh

浏览器支持

尽管不推荐使用 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 实例：图像边框

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

语法

<img border="value" />

属性值

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

TIY 实例

<img> 标签的 border 属性
Ví dụ này trình bày cách sử dụng thuộc tính border của thẻ <img> để thay đổi viền hình ảnh.

Đọc thêm: Loại bỏ viền hình ảnh

Bằng cách sử dụng thuộc tính border="0" trong thẻ <img>, bạn có thể loại bỏ viền xung quanh liên kết hình ảnh. Đối với một số hình ảnh, đặc biệt là các hình ảnh bản đồ, việc không có viền có thể cải thiện vẻ ngoài của trang. Đối với những nút liên kết rõ ràng là chỉ dẫn đến hình ảnh khác, nếu không có viền, hình ảnh có thể trông tốt hơn.

Mặc dù việc loại bỏ viền không làm giảm khả năng sử dụng của tài liệu, nhưng bạn vẫn nên cẩn thận. Bởi vì không có viền có nghĩa là loại bỏ một hiệu ứng chỉ dẫn視 giác liên kết rất phổ biến, điều này có thể làm cho độc giả khó tìm thấy những liên kết này hơn.

Chúng tôi极力推荐 bạn nên sử dụng cùng một số phương pháp khác khi sử dụng hình ảnh không có viền, để độc giả của bạn biết nên nhấp vào những hình ảnh này. Dù chỉ sử dụng văn bản đơn giản, cũng rất khó để làm tài liệu dễ tiếp cận hơn cho độc giả.

Thẻ <img> HTML