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

Question

我基本上有一堆图像，这些图像都包裹在div中，该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-qc-100-100-5.jpg" alt=""> </div> <div> <img src="http://lorempixel.com/output/city-qc-100-100-5.jpg" alt=""> </div> <div> <img src="http://lorempixel.com/output/city-qc-100-100-5.jpg" alt=""> </div> </div> </div>