如何在CSS

Question

我想在下面的一個白色邊框樣式的圖像周圍像避開圖像的白色輪廓：

如果我這樣做：

<ul class="learn"> 
    <li class="thumbnaile" > <img id="portrait" src="/assets/allyson.jpg" class="stretch" /> 
    </li> 
</ul> 

...然後添加填充到.thumbnaile ...

是否有這樣做比這更好/更有效的方式？

Answer 1

您既可以使用border（這當然是顯而易見的選擇），但也有padding和box-shadow：

img { 
    background-color: #fff; 
    padding: 4px; 
} 

JS Fiddle demo。

在此示例中，img元素由4px填充，這允許background-color從圖像的「後面」伸出。

img { 
    margin: 4px 0 0 4px; 
    box-shadow: 0 0 0 4px #fff; 
} 

JS Fiddle demo。

因爲box-shadow不會取代元素，所以需要margin以允許在所有面上顯示box-shadow。

Answer 2

只是用border屬性應該做你想要什麼：

border: solid white 4px; 

只要僅有部分需要的邊界外緣（矩形圖像），將圍繞着它大約如圖所示。如果邊框應切入圖像中，您可能需要修改box-sizing;但對於填充，默認值將工作。

邊框將工作在<li>或<img>標籤，這取決於你想如何打好圖像（S）出（<li>將允許採用無邊框他們之間多張圖片）。

將padding添加到該類將產生類似的效果，但對於用於確定元素大小和位置的框會有不同的表現。 <li>上的填充將對<img>上的適當邊框產生非常接近的效果，但將邊框放置在<img>本身可能會簡化您的CSS。