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

Question

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

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

Answer 1

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

CSS

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

Run Code Online (Sandbox Code Playgroud)

HTML

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

Run Code Online (Sandbox Code Playgroud)

不适合我.我必须在CSS文件中执行".ImageBorder(\nl){(\nl)border:1px solid#000000;(\nl)}",这是la Diodeus的答案. (2认同)

Answer 2

Dio*_*ane 42

两种方式:

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

Run Code Online (Sandbox Code Playgroud)

要么

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

Run Code Online (Sandbox Code Playgroud)

虽然这是严格正确的,因为它是HTML,CSS方法几乎肯定是最好的答案 (5认同)

Answer 3

Tre*_*ble 17

您还可以添加填充以获得良好的效果.

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

Run Code Online (Sandbox Code Playgroud)

Answer 4

ste*_*nvh 9

我也喜欢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>

Run Code Online (Sandbox Code Playgroud)

如果需要外部样式表,请将<style> ... </ style>块替换为

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

Run Code Online (Sandbox Code Playgroud)

Answer 5

AJM*_*AJM 6

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

Answer 6

Sub*_*bin 6

CSS

img{border:2px solid black;}

Run Code Online (Sandbox Code Playgroud)

归档时间：	16 年，10 月前
查看次数：	186305 次
最近记录：	11 年，2 月前