html - 如何制作环绕文本的边框

Question

我想在即将到来的幽灵仪表板中使文本元素周围有一个边框:Ghost blog

我这样做了:

    border: 10px solid #ffffff;

然而，这适用于高度而不是宽度。宽度要宽很多。我知道我可以将宽度设置为某个值，但是我希望在更改文本时更新宽度，因此每侧的文本和框之间始终有一定量的空间。

我不确定该怎么做，或者它是否需要 JS，或者是否可以用纯 CSS 来完成。

Answer 1

您将要在 span 元素上使用填充和 display:inline-block; 以执行此操作。例如:

HTML

<span>GHOST</span>

CSS

span {
    padding: 10px;
    border: 10px solid white;
    display: inline-block;
}

这将允许文本周围的边框根据长度收缩和增长。无论大小如何，它还会在边框和字母之间保留 10px 的空间。

这是一个 fiddle :http://jsfiddle.net/ZDzn2/