在照片上嵌入邊框

Question

我正在試圖創建一個坐在圖像內部的邊框。所以，從照片的邊緣到邊框的位置應該有一個10px左右的邊距。 http://imgur.com/a/lMSMR

您可以看到頁面在這裏的照片：http://blueboxluxe.com/praise/

不管怎麼說，這幾個部位是很難做的... 1）佈局是它應該是什麼樣子

例子流體 - 照片尺寸可能會改變。 2）我希望邊框能夠顯示在所有照片上 - 無論大小。 3）在讚美頁面上，有很多漂浮物發生;所以，事情需要正確處理。

我試過玩盒子陰影，但我得到的是在圖像的外部邊框。不在裏面。

Answer 1

嘗試outline屬性，並指定一個負偏移：

outline:2px solid red; 
outline-offset:-15px; 

不支持IE，但！

Answer 2

你也可以嘗試一個div容器

<div><img src=""/></div> 

給予的div固定的高度和寬度和溢出隱藏。 div{height:100px;width:100px;overflow:hidden;border:1px solid black;}

Answer 3

也許創建包含所述圖像在div內一個div，其設置爲

position:absolute; 
margin:2% auto; 
left:2%; 
width:96%; 
border:solid 1px #fff; 

，然後給由含有它的元素：

text-align:center; 

可選地，如果圖像漂浮在一個更大的包含其他元素的div中，將其放入一個設置爲圖像大小的父div中，然後放入新的div，以便在圖像下方或上方添加邊框;不要將圖像放入您想用作邊框的div中;我使用百分比的原因是因爲它應該根據圖像的大小調整大小。

如果你玩弄數字，它應該如你所願地工作。

Answer 4

您可以在css3中使用box-shadow屬性。使用1px厚的盒子陰影和顏色會在幾乎所有的瀏覽器上產生這種效果。