html - 照片上的嵌入边框

Question

我正在尝试创建一个位于图像内部的边框。所以，从照片的边缘到边框的位置应该有 10px 左右的边距。

它应该是什么样子的示例：http: //imgur.com/a/lMSMR

您可以在此处查看带有照片的页面：http: //blueboxluxe.com/praise/

无论如何，这其中的一些部分更难做到...... 1）布局是流畅的——照片大小可以改变。2）我希望边框出现在所有照片上——无论大小。3）在好评页面，有很多浮动发生；所以，事情需要正确地工作。

我尝试过使用 box-shadow，但我得到的只是图像外部的边框。不在里面。

score 2 · Accepted Answer

尝试使用 outline 属性并指定一个负偏移量：

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

虽然不支持IE！

score 0 · Accepted Answer

你也可以试试容器 div

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

给 div 一个固定的高度和宽度并隐藏溢出。 div{height:100px;width:100px;overflow:hidden;border:1px solid black;}

score 0 · Accepted Answer

也许在包含图像的 div 中创建一个 div，将其设置为

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

然后给出包含它的元素：

text-align:center;

或者，如果图像浮动在包含其他元素的更大 div 中，请将其放入设置为图像大小的父 div 中，然后放入将在图像下方或上方添加边框的新 div；不要将图像放入要用作边框的 div 中；我使用百分比的原因是因为它应该根据图像的大小调整大小。

如果你玩弄这些数字，它应该可以如你所愿。

score 0 · Accepted Answer

您可以使用 css3 中的 box-shadow 属性。使用带有颜色的 1px 厚的 box-shadow 可以在几乎所有浏览器上为您提供这种效果。

4 回答 4