如何为图像创建边框？

Question

我想在图像周围创建一个带圆角的彩色粗边框。它看起来像这样：

如何使用HTML和CSS执行此操作？

Answer 1

以下内容......

img {
border:2px solid black;
border-radius:10px;
}

将其修改为最适合您的方式。

Answer 2

您可以使用它，它肯定会按您的要求运作。

img {
  border: 13px solid blue;
  border-radius: 10px;
}

Answer 3

如何在CSS和HTML中执行此操作：

<强> CSS：

.ImageBorder
{
  border-width: 5px;
  border-color: Blue;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}

<强> HTML：

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

Answer 4

您可以将img放在包装器div中，然后给出border-radius值以创建圆角边框。通过这种技术，图像也将显示为圆角。

.image-wrap {
    position: relative;
    display: inline-block;
    max-width: 100%;
    vertical-align: bottom;
}
.image-wrap:after {
    content: ' ';
    width: 100%;
    height: 100%;
    position: absolute;
    top: -1px;
    left: -1px;
    border: solid 3px #1b1b1b;

    -wekbit-box-shadow: inset 0 0 1px rgba(255,255,255,.4), inset 0 1px 0 rgba(255,255,255,.4), 0 1px 2px rgba(0,0,0,.3);
    -moz-box-shadow: inset 0 0 1px rgba(255,255,255,.4), inset 0 1px 0 rgba(255,255,255,.4), 0 1px 2px rgba(0,0,0,.3);
    box-shadow: inset 0 0 1px rgba(255,255,255,.4), inset 0 1px 0 rgba(255,255,255,.4), 0 1px 2px rgba(0,0,0,.3);

    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
}

.image-wrap img {
    vertical-align: bottom;

    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.4);
    box-shadow: 0 1px 2px rgba(0,0,0,.4);

    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}

这是工作演示。 http://jsbin.com/jicikalo/1/edit