我该如何使用HTML给图片添加边框？
10个回答
49
两种方法：
<img src="..." border="1" />
<img style='border:1px solid #000000' src="..." />
- Diodeus
4
5虽然"strictly correct"这个说法在HTML方面是正确的，但采用CSS方法几乎肯定是最佳选择。 - annakata
+annakata的评论。最好将CSS放在外部样式表中。 - Jack Sleight
1外部样式表是最好的选择，但如果你是初学者可能会有困难。这位发帖者似乎就是一个初学者。 - Diodeus - James MacFarlane
如果您创建一个扩展名为.css的文件，然后在HTML的<head>标签之间添加此行，那么您就没问题了。<link href="CSS/MyStyle.css" rel="stylesheet" type="text/css" /> - RSolberg
47
这里提供一些 HTML 和 CSS 代码来解决你的问题：
CSS
.ImageBorder
{
border-width: 1px;
border-color: Black;
}
HTML
<img src="MyImage.gif" class="ImageBorder" />
- Russell Solberg
3
2对我没用。我不得不在CSS文件中这样写“.ImageBorder (\nl) { (\nl) border: 1px solid #000000; (\nl)}”，就像Diodeus的答案一样。 - EddyTheB
听起来你可能还有其他的事情要处理...也许是竞争风格？ - RSolberg
1你需要在上面的CSS中添加solid才能显示边框
border-style:solid; - bobbdelsol
17
你还可以添加内边距来达到良好的效果。
<img src="image.png" style="padding:1px;border:thin solid black;">
- Trevor Bramble
10
我也更喜欢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>
如果您想使用外部样式表，请将 <style>...</style> 块替换为
<link rel="stylesheet" type="text/css" href="somestylesheet.css" />
- stevenvh
1
关于内联样式，你是正确的。我考虑到如何应用CSS超出了问题的范围，并为简洁起见使用了内联样式。 - Trevor Bramble
6
CSS
img{border:2px solid black;}
- Subin
6
border="1" 在图片标签上使用或者使用css border:1px solid #000;
- AJM
2
杰克，
你可以在 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在图像周围添加框？”该问题已被他人重新编写，因此我不能100％确定您是否想要在图像上添加边框。
如果您只想在图像周围添加框，请使用具有自己样式的DIV：
.imageBox {
background-color:#f1f1f1;
padding:10px;
border:1px solid #000000;
}
<div class="imageBox">
<img src="picture.jpg" alt="My Picture" />
</div>
- Jonathan Sampson
0
如上所述，一行简单的代码将解决您的问题
border: 1px solid #000;
还有另一种方法可以给你的图片添加边框，而且使用Photoshop，你可以通过下面这个教程来学习如何操作： http://bannercheapdesign.com/articles-and-tutorials/learn-how-to-add-border-to-your-banner-design-using-photoshop/
- user3718754
1
这不是一个好的回答，而且它让人怀疑是否为垃圾邮件。在问题被提出 五年 后，marko解释了为什么图像编辑答案不好，在两年后，你只贡献了一个链接到另一个专有软件的教程，来做完全相同的事情。-1。 - wizzwizz4
0
正确的方法取决于您是否只想让内容中的特定图像具有边框，或者在代码中是否存在某些图像需要具有边框的模式。在第一种情况下，请使用img元素上的style属性，否则请为其指定一个有意义的类名，并在样式表中定义该边框。
- RommeDeSerieux
-1
以上的回答肯定很好。但是对于像我这样的笨蛋，我推荐使用Snagit 10。您可以在将图像插入网页之前以任何宽度、样式和颜色为其添加边框。他们提供了一个完整的30天试用程序。
- Pete Shotton
1
1当然，如果您想重新设计网站或重新利用图像，那么这就没问题了。但是最好的实践是分离内容和表现形式，这有很好的理由。 - marko
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接