跨度内每个字母的框边框

Question

我的跨度如下

    <span style="font-size:18px; font-weight:bold;">8342</span>

如何使用css在该跨度内的每个数字周围放置黑框？

我想要它就像下面的图像

Answer 1

请检查 Demo

<span style="font-size:18px; font-weight:bold;" class="test">8342</span>

.pwn{
 border: 2px solid black ;
  display: inline;  
}

var text= $(".test").html();
 $(".test").html('');
for(i=0;i<=text.length-1; i++)
{
var html = text.substr(i,1);
var sp="<span style='font-size:18px; font-weight:bold;' class='pwn'>" + html
sp+=" </span> &nbsp;";
$(".test").append(sp);
}

Answer 2

它可能但有点复杂。 您需要字体等宽和背景图片，您将每个字母放在另一个范围内，或者您在javascript中拆分每个字母！ 这是一个没有javascript的解决方案：

＆＃13;

＆＃13;

span{
    background-image: url("http://3.bp.blogspot.com/-4oAWWCcNNz4/Tjr3nKNyVUI/AAAAAAAAPLU/Pouua-pNsEY/s1600/sq.gif");   
    background-size: 20px;
    font-family: monospace;
    font-size: 13px;
    padding-left: 5px;
    letter-spacing: 12px;
    font-weight:bold;
}

＆＃13;

 <span>8342</span>

＆＃13;

＆＃13;

＆＃13;

注意：这不适用于IE11。它不会加载图像。

我希望我能帮到你^^

Answer 3

试试这个： -

span{
 border: 2px solid black ;
  display: inline;  
}

   <span style="font-size:18px; font-weight:bold; color:red">8</span>
   <span style="font-size:18px; font-weight:bold; color:red">3</span>
   <span style="font-size:18px; font-weight:bold; color:red">4</span>
   <span style="font-size:18px; font-weight:bold; color:red">2</span>