Question

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

您可以在此处看到包含照片的页面：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厚盒子阴影可以在几乎所有浏览器上实现这种效果。