如何在 HTML 中为图像添加边框？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/570356/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I add a border to an image in HTML?
提问by Diodeus - James MacFarlane
How can I add a border to an image using HTML?
如何使用 HTML 为图像添加边框？
回答by RSolberg
Here is some HTML and CSS code that would solve your issue:
以下是一些可以解决您的问题的 HTML 和 CSS 代码：
CSS
CSS
.ImageBorder
{
border-width: 1px;
border-color: Black;
}
HTML
HTML
<img src="MyImage.gif" class="ImageBorder" />
回答by Diodeus - James MacFarlane
Two ways:
两种方式：
<img src="..." border="1" />
or
或者
<img style='border:1px solid #000000' src="..." />
回答by Trevor Bramble
You can also add padding for a nice effect.
您还可以添加填充以获得不错的效果。
<img src="image.png" style="padding:1px;border:thin solid black;">
回答by stevenvh
I also prefer CSS over HTML; HTML is about content, CSS about presentation.
我也更喜欢 CSS 而非 HTML；HTML 是关于内容的，CSS 是关于展示的。
With CSS you have three options.
使用 CSS，您有三个选择。
- Inline CSS (like in Trevor's and Diodeus' solutions). Hard to maintain, and doesn't guarantee consistency: you'll have to check yourself that every image has the same border-width and border-color.
- Internal stylesheet. Solves the consistency issue for all images on the page having class="hasBorder", but you'll have to include a stylesheet for each page, and again make sure "hasBorder" is defined the same each time.
- External stylesheet. If you include a link to the external CSS file on each page allimages with class="hasBorder" on all pages will have the same border.
- 内联 CSS（就像在 Trevor 和 Diodeus 的解决方案中一样）。难以维护，并且不能保证一致性：您必须自己检查每个图像是否具有相同的边框宽度和边框颜色。
- 内部样式表。解决了页面上所有具有 class="hasBorder" 的图像的一致性问题，但您必须为每个页面包含一个样式表，并再次确保“hasBorder”每次定义相同。
- 外部样式表。如果您在每个页面上包含指向外部 CSS 文件的链接，则所有页面上 class="hasBorder" 的所有图像都将具有相同的边框。
Example using internal stylesheet:
使用内部样式表的示例：
<!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>
If you want an external stylesheet, replace the <style>...</style> block with
如果需要外部样式表，请将 <style>...</style> 块替换为
<link rel="stylesheet" type="text/css" href="somestylesheet.css" />
回答by AJM
border="1"ON IMAGE tag or using css border:1px solid #000;
border="1"ON IMAGE 标签或使用 css border:1px solid #000;
回答by Subin
CSS
CSS
img{border:2px solid black;}
回答by Sampson
Hyman,
Hyman，
You can learn a great deal about borders, and how to use them at http://www.w3schools.com/css/css_border.asp. That being said, there are a couple different ways you could accomplish this.
您可以在http://www.w3schools.com/css/css_border.asp 上了解有关边框以及如何使用它们的大量信息。话虽如此，有几种不同的方法可以实现这一点。
Below is how I generally do it, but reading the documentation on w3schools you may come upon your own desired method.
以下是我通常的做法，但阅读 w3schools 上的文档，您可能会找到自己想要的方法。
.addBorder {
/* Thickness, Style, and Color */
border: 1px solid #000000;
}
<img src="mypicture.jpg" alt="My Picture" class="addBorder" />
Edit:
编辑：
I noticed the original question was not "How to add a border to an image," but instead it was "how to add in a box around an image using html?" The question was re-written by others, so I'm not 100% sure you wanted a border on your image.
我注意到最初的问题不是“如何为图像添加边框”，而是“如何使用 html 在图像周围添加框？” 这个问题是由其他人重新编写的，所以我不能 100% 确定您想要图像上的边框。
If you just wanted a box around your images, you could use a DIV, with it's own styles:
如果您只想在图像周围放置一个框，则可以使用具有自己样式的 DIV：
.imageBox {
background-color:#f1f1f1;
padding:10px;
border:1px solid #000000;
}
<div class="imageBox">
<img src="picture.jpg" alt="My Picture" />
</div>
回答by Сыч
The correct way depends on whether you only want a specific image in your content to have a border or there is a pattern in your code where certain images need to have a border. In the first case, go with the style attribute on the img element, otherwise give it a meaningful class name and define that border in your stylesheet.
正确的方法取决于您是否只希望内容中的特定图像具有边框，或者代码中是否存在某些图像需要具有边框的模式。在第一种情况下，使用 img 元素上的 style 属性，否则给它一个有意义的类名并在样式表中定义该边框。
回答by user3718754
as said above simple line of code will fix your problems
如上所述，简单的代码行将解决您的问题
border: 1px solid #000;
There is another option to add border to your image and that with photoshop you can see how it's done with this tutorial below: http://bannercheapdesign.com/articles-and-tutorials/learn-how-to-add-border-to-your-banner-design-using-photoshop/
还有另一个选项可以为您的图像添加边框，并且使用 photoshop 您可以在下面的本教程中看到它是如何完成的：http: //bannercheapdesign.com/articles-and-tutorials/learn-how-to-add-border-to -您的横幅设计使用 photoshop/
回答by Pete Shotton
The answers above are very good I'm sure. But for dim-wits, like me, I recommend Snagit 10. You can give an image a border in any width, style, and color before inserting it into your webpage. They do a full working program on 30 day trial.
上面的答案非常好，我敢肯定。但是对于像我这样的笨蛋，我推荐 Snagit 10。在将图像插入到您的网页之前，您可以为图像设置任何宽度、样式和颜色的边框。他们在 30 天试用期内完成了完整的工作计划。
