我想在即将到来的幽灵仪表板中使文本元素周围有一个边框:Ghost blog
我这样做了:
border: 10px solid #ffffff;
然而,这适用于高度而不是宽度。宽度要宽很多。我知道我可以将宽度设置为某个值,但是我希望在更改文本时更新宽度,因此每侧的文本和框之间始终有一定量的空间。
我不确定该怎么做,或者它是否需要 JS,或者是否可以用纯 CSS 来完成。
最佳答案
您将要在 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/
关于html - 如何制作环绕文本的边框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23638719/