透明边框内

我想通过使用CSS在图像周围设置透明边框。我找不到任何方法来做到这一点。透明边框内

这里是link为我的形象与透明的内部边界效应。

2014-01-16 Rahat

这不是一件容易的事情，因为图像被替换的元素，并有一些限制（伪元素不工作，插入框阴影不工作，...）。

您有几种选择（有可能更多，我只列出二）：

解决方案1：让您的图像普通div的背景图像和应用边框 - 此边框会自动重叠图片。顺便说一句，你可以使用background-clip和background-origin来改变这种行为。
问题：您需要知道图像的尺寸，才能相应地调整div的大小。

解决方案2：将图像包装到另一个元素中，并声明应用边界的伪元素。重要的是在包装元素上的img和position:relative上的display:block。

2014-01-16 11:59:03 Christoph

@ Rahat插入框阴影不适用于图像。 – Christoph

但这里出现了新问题。我有一些文字包装image.but但如果我使用display：inline-block为包装div它为文本分配空间。这里是（[link]（https://dl.dropboxusercontent.com/u/189718598/index.html）。）。 – Rahat

@Rahat只是声明'浮动'（左或右，无论你喜欢）的包装div。 – Christoph

-1

我可以提供使用4边界块与position:absolute。您可以更改每个边框的样式。对于的exaple的左侧和顶部边框添加阴影

2014-01-16 12:26:27

使用box-shadow

这个CSS box-shadow: inset 0 0 0px 8px rgba(255, 16, 16, 0.45);

你可以做的事情令人惊讶的，他自己享受它

2014-01-16 13:26:46

它很好用。谢谢@Deekey的帮助。 – Rahat

插图框阴影不适用于图像。在具有背景图像的元素上，您可以像我在解决方案中描述的那样使用正常的边框。 – Christoph

回答