如何为图像创建边框?

时间:2014-03-04 20:56:52

标签: html css html5 css3 border

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

Border around image.

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

4 个答案:

答案 0 :(得分:1)

以下内容......

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

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

答案 1 :(得分:1)

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

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

答案 2 :(得分:1)

如何在CSSHTML中执行此操作:

<强> 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" />

答案 3 :(得分:1)

您可以将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