泡沫像边框风格

Question

有没有办法用css实现这种泡沫/粘贴外观？

我想也许可以使用bg图像，但我需要盒子是灵活的，这意味着宽度/高度会根据盒子内容的长度而变化。

Answer 1

这是可能的，但不是很直接。

• CSS背景和边框模块的Border Images部分（以及一般文档）值得一看。

• CSS-Tricks撰写的文章Understanding border-image提供了丰富的信息。

• 快速查看Google还给了我border-image-generator。看起来很有趣。

使用纯CSS（和图像）创建边框是一个好主意，但它有限制。对于你需要更多的情况，你可以尝试以下的好技巧：

• 嵌套（通常为四个）div s背景，其位置和重复方式使其看起来像边框。每个嵌套的div都会填充框的一侧。因为它是嵌套的，所以您应该能够调整父div的大小，并使用它调整边框大小。

• 绝对定位图像以填充间隙（如角落）。绝对定位元素时，请确保父元素相对定位。

你必须修补它，让它按你想要的方式工作，但它是可能的。

Answer 2

我们走了，尽管是一个问题很少的问题很少（你下次应该发布一些代码！）我找到了一个解决方案：

http://www.w3.org/TR/css3-background/#border-images

在您的示例中，为边框制作泡沫的完美方形图像。

为了让您的生活更轻松，我将图像宽度和高度设为3的倍数（W3使用81x81作为示例）。查看边框图像语法：

 border-image:url(border.png) 27 27 27 27 round;

27 27 27 27分别是顶部，右侧，底部和左侧border-image-slice。这意味着在顶部，图像偏移27，右边偏移27，等等。这是因为27px是81x81图像的三分之一，有效地摆脱了角落（因为它跳过27px）。

这就是W3所做的一个例子，它运作得很好。我不确定具体细节，但看一下文档应该会产生很好的结果。在这种情况下，如果您有一个81x81边框图片并使用此代码，万岁！它会工作。否则，你就是你自己！