Question

我基本上有一堆图像包含在一个以整个堆栈为中心的div中。我想在整个堆栈周围创建一个粗边框或填充，而不是单个图像，但我不知道如何使用CSS执行此操作。任何帮助都会很棒。每个图像也在其自己的div中用于其他样式目的。此外，为单个图像添加样式属性是不可接受的，因为图像实际上是使用angularjs ng-repeat指令显示的。下面只是基本上发生的伪代码，但我正在寻找一种方法来覆盖整个图像堆栈。

<div class="center">
    <div>
        <img>
    </div>
    <div>
        <img>
    </div>
    <div>
        <img>
    </div>
</div>

Answer 1

查看此codepen：

这将在您的外部div周围生成边框：

.center {
    border: 5px solid #D32232;
}

我使用了实体行。您也可以使用其他线路。这些是可能性：

点缀
虚线
双
槽
脊
插入
首先

请查看此页面，查看有关border的完整文档。

Answer 2

你可以将你的外部div与黑色轮廓接壤

  .center{ border: 5px solid #000;}

然后你的内部div有一个颜色

   .center div{border: 4px dashed blue;}

如果你想勾勒出每个img，如果div中有多个img你可以做这样的事情

  .center div img{border: 3px dotted red;}

Answer 3

你需要在图像周围收缩包裹另一个包装来做到这一点。否则，这是不可能的。

.center {
  text-align: center;
  border: 2px solid red;
  padding: 5px;
}
.wrapper {
  display: inline-block;
  border: 2px solid green;
  font-size: 0;
}
.wrapper div {
  display: inline-block;
  padding: 5px;
}
.wrapper div img {
  display: block;
}

<div class="center">
  <div class="wrapper">
    <div>
      <img src="http://lorempixel.com/output/city-q-c-100-100-5.jpg" alt="">
    </div>
    <div>
      <img src="http://lorempixel.com/output/city-q-c-100-100-5.jpg" alt="">
    </div>
    <div>
      <img src="http://lorempixel.com/output/city-q-c-100-100-5.jpg" alt="">
    </div>
  </div>
</div>

如何在居中的图像周围制作彩色边框

3 个答案: