如何在html5中的图像周围放置花式边框？

Question

我正在制作html页面，其中我放了一些照片。现在我想在它周围放一些花哨的边框。我怎么做？我的代码是：

<img src="award.gif">

当我运行它时，它完美地出现了。但我需要一个边界。我使用的是最新版本的Google Chrome。感谢。

Answer 1

您可以使用CSS规则在图像周围设置边框，请参阅下面的链接，您可以在其中看到不同的CSS边框，并且可以生成跨浏览器边框CSS。我非常喜欢这个工具，这个工具提供了一个直观的预览，可以看到边框的样子 -

http://www.cssmatic.com/border-radius

Answer 2

像这样，

<强>的CSS：

img { 
   border:1px solid #021a40;
}

“双边界”：

img {
   padding:1px;
   border:1px solid #021a40;
}

对于多个图像，您可以在每个图像中分类，而css就在这里，

简单Example

另一个Example

有关border和border-radius的更多信息，请参阅此Link

<强>更新

FIDDLE

Answer 3

你可以通过使用替代方法来实现这一点，因为在CSS方面，这可以更加通用。

CSS

myImage { 
    background:url(path to image file goes here);
    border: 1px solid #000000; //black border
    //some width and height values
}

HTML

<div class="myImage"></div>

Answer 4

HTML

<div class="divimg">
<img src="award.gif">
</div>

CSS

.divimg {
 border: 1px solid red; }

Answer 5

有很多方法可以做到这一点，你可以创建一个div并将图像放在div中，然后用css创建边框。 另一种简单的方法是：

img {
  border-style:solid;
  border-width:1px;
  border-color:red;
  }