Question

如何使用HTML为图像添加边框？

Answer 1

以下是一些可以解决您问题的HTML和CSS代码：

<强> CSS

.ImageBorder
{
    border-width: 1px;
    border-color: Black;
}

<强> HTML

<img src="MyImage.gif" class="ImageBorder" />

Answer 2

两种方式：

<img src="..." border="1" />

或

<img style='border:1px solid #000000' src="..." />

Answer 3

您还可以添加填充效果。

<img src="image.png" style="padding:1px;border:thin solid black;">

Answer 4

我也更喜欢CSS而不是HTML; HTML是关于内容，关于演示的CSS。

使用CSS，您有三种选择。

内联CSS（如Trevor和Diodeus的解决方案）。难以维护，并且不保证一致性：您必须检查自己每个图像是否具有相同的边框宽度和边框颜色。
内部样式表。解决了具有class =“hasBorder”的页面上所有图像的一致性问题，但是您必须为每个页面包含样式表，并再次确保每次都定义“hasBorder”相同。
外部样式表。如果您在每个页面上包含指向外部CSS文件的链接所有所有页面上带有class =“hasBorder”的图像将具有相同的边框。

使用内部样式表的示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
              "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Image with border</title>

<style type="text/css">
  img.hasBorder { border:15px solid #66CC33; }
</style>

</head>

<body>
  <img class="hasBorder" src="peggy.jpg" alt="" />
</body>
</html>

如果您需要外部样式表，请替换＆lt; style＆gt; ...＆lt; / style＆gt;阻止

<link rel="stylesheet" type="text/css" href="somestylesheet.css" />

Answer 5

border="1" ON IMAGE标记或使用css border:1px solid #000;

Answer 6

CSS

img{border:2px solid black;}

Answer 7

杰克，

您可以在http://www.w3schools.com/css/css_border.asp了解有关边框以及如何使用它们的大量信息。话虽如此，有几种不同的方法可以实现这一目标。

以下是我一般的做法，但阅读w3schools上的文档，您可能会采用自己想要的方法。

.addBorder {
  /* Thickness, Style, and Color */
  border: 1px solid #000000;
}

<img src="mypicture.jpg" alt="My Picture" class="addBorder" />

修改

我注意到原来的问题不是“如何为图像添加边框”，而是“如何使用html在图像中添加框？”这个问题是由其他人重写的，所以我并不是百分之百确定你想要在你的图像上设置边框。

如果你只是想在你的图像周围放一个盒子，你可以使用DIV，它有自己的风格：

.imageBox { background-color:#f1f1f1; padding:10px; border:1px solid #000000; } <div class="imageBox"> <img src="picture.jpg" alt="My Picture" /> </div>

Answer 8

正确的方法取决于您是否只希望内容中的特定图像具有边框，或者代码中是否存在某些图像需要具有边框的图案。在第一种情况下，请使用img元素上的style属性，否则为其指定一个有意义的类名，并在样式表中定义该边框。

Answer 9

如上所述，简单的代码行将解决您的问题

border: 1px solid #000;

还有另一种方法可以为您的图片添加边框，而使用photoshop，您可以看到以下教程是如何完成的： http://bannercheapdesign.com/articles-and-tutorials/learn-how-to-add-border-to-your-banner-design-using-photoshop/

Answer 10

上面的答案非常好，我敢肯定。但对于像我这样的傻瓜，我推荐使用Snagit 10.在将图像插入网页之前，您可以为图像添加任何宽度，样式和颜色的边框。他们在30天试用期间完成了一个完整的工作计划。

如何在HTML中为图像添加边框？

10 个答案: