45

我想使用 css 在我的内容 div 中的所有图像上添加一个白色边框。页眉和页脚 div 区域中的图像不应受到影响。我该如何做到这一点？请参见下面的示例图像。网页上有不同大小的图像。

见图片：

带内边框的图像

4

5 回答 5

97

您可以在没有额外元素或伪元素的情况下执行此操作：

http://cssdeck.com/labs/t6nd0h9p

img {
  outline: 1px solid white;
  outline-offset: -4px;
}

IE9&10不支持outline-offset属性，其他支持还是不错的： http ://caniuse.com/#search=outline

不需要知道图像尺寸的替代解决方案：

http://cssdeck.com/labs/aajakwnl

<div class="ie-container"><img src="http://placekitten.com/200/200" /></div>

div.ie-container {
  display: inline-block;
  position: relative;
}

div.ie-container:before {
  display: block;
  content: '';
  position: absolute;
  top: 4px;
  right: 4px;
  bottom: 4px;
  left: 4px;
  border: 1px solid white;
}

img {
  vertical-align: middle; /* optional */
}
于 2013-10-03T13:37:28.413 回答
1

你可以试试这个：

html:

<div class="image">
  <div class="innerdiv">

  </div>
</div>

CSS：

.image
{
    width: 325px;
    height: 239px;
    background: url("https://i.picsum.photos/id/214/325/239.jpg?hmac=7XH4Bp-G9XhpuKz5vkgES71GyXKS3ytp-pXCt_zpzE4") 0 0 no-repeat;
    background-size: cover;
    padding: 10px;
}

.innerdiv
{
  border: 1px solid white;
  height:100%;
  width: 100%;
}

jsFiddle

希望这就是你的意思:)

于 2013-10-03T13:14:48.263 回答
0

You can do something like this DEMO

HTMl

<div class="imgborder">
   <div class="in-imgborder">

    </div>
</div>

CSS

.imgborder {
    width: 300px;
    height: 300px;
    position: relative;
    background: url(http://placekitten.com/300/300) no-repeat;
}
.in-imgborder {
    width: 290px;
    height: 290px;
    position: absolute;
    top: 4px;
    left: 4px;
    border: 1px solid red;
}
于 2013-10-03T13:18:11.783 回答
0

无论 div ID 或类是什么，您都可以简单地添加

#yourDivIDExample {
...
}

#yourDivIDExample img{
border:1px solid #ffffff;
}

这将在 div 本身的图像周围创建一个边框.. 同样适用于类或全局规则..

img {
border:1px solid #ffffff;
}
于 2013-10-03T13:14:13.647 回答
0

我解决了这个问题box-shadow: inset，它适用于 IE11 及更高版本。我想在图像周围的角落有一个边框，但这个例子有边框10px插图。它需要一个div带有:beforeor:after元素的父级，但可以很好地处理它。

.image {
    width: 100%;
    height: auto;
}

.image__wrapper {
    position: relative;
}

.image__wrapper:before {
  content: '';
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 10px;
  right: 10px;
  box-shadow: inset 0 0 0 3px red;
}

CodePen 演示

于 2017-02-03T16:57:19.533 回答