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

时间:2015-04-24 04:43:58

标签: html html5 image google-chrome

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

<img src="award.gif">

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

5 个答案:

答案 0 :(得分:4)

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

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

答案 1 :(得分:1)

像这样,

<强>的CSS:

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

“双边界”:

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

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

简单Example

另一个Example

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

<强>更新

FIDDLE

答案 2 :(得分:0)

你可以通过使用替代方法来实现这一点,因为在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>

答案 3 :(得分:0)

HTML

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

CSS

.divimg {
 border: 1px solid red; }

答案 4 :(得分:0)

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

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