如何在居中圖像周圍制作彩色邊框

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>