Question

我正在尝试在每个字母周围创建一个用于里程表样式统计计数器的框。你知道如何在不跨越每个字母的情况下做到这一点吗？如果你有任何想法，我很乐意听到。

Answer 1

如果您使用单声道间隔字体，则可以使用带有框的背景图像。

Answer 2

另一种选择是使用javascript添加所需的所有额外标记。有一些jquery插件已经做了这种类型的事情：

http://daverupert.com/2010/09/lettering-js/

Answer 3

如果没有将每个字母包装在可以设置样式的元素中，我无法在HTML中看到这样做的方法。

Answer 4

你可以创建十个GIF，每个数字一个（你说的统计数据），看起来像你想要的那样。当你加载页面时，使用javascript将你的字符串拆分成一个数组，然后遍历它并用相应的gif替换每个字符。

Answer 5

嗯，当然可以翻转它并使用带有盒装字母的字体（通过@font-face）。

Answer 6

使用CSS3渐变，你可以使用纯css而不是javascript。主要思想是创建一个渐变，其中您想要的框颜色是某个颜色停止的纯色，然后渐变是透明的。您必须根据文本的字体大小和字母间距计算颜色停止。然后将渐变应用于文本元素的伪类。瞧。

这是我为span元素创建的一个示例，其中包含为组织筹集的金额。每个号码都需要一个粉红色的盒子。渐变是如此复杂的原因是因为我只在每3个数字之后重复，因为每3个数字都有一个逗号需要在框外，因此需要额外的间隙。如果你在每个角色后重复它可以简单得多，但我想你会提到一个里程表，我会分享这种方法。您还可以使用更多浏览器前缀扩展这些渐变，以使其在IE，Opera等中工作。

html:
<span id="amount-raised">10,123</span>

css:
span#amount-raised {
position: absolute;
z-index: 1;
font-size: 70px;
letter-spacing: 10px;
color: #fff;
}
span#amount-raised:before { /* pink boxes */
  content: '';
  position: absolute;
  top: 0; left: 0;
  z-index: -1;
  height: 100%; width: 100%;
  background-image: -webkit-repeating-linear-gradient(right, pink, pink 50px, transparent 50px, transparent 55px, pink 55px, pink 105px, transparent 105px, transparent 110px, pink 110px, pink 160px, transparent 160px, transparent 176px);
  background-image: -moz-repeating-linear-gradient(right, pink, pink 50px, transparent 50px, transparent 55px, pink 55px, pink 105px, transparent 105px, transparent 110px, pink 110px, pink 160px, transparent 160px, transparent 176px);
}

Answer 7

我喜欢DMTinter's answer，但它比必要的时间更长（加上它已有7年的历史了）-这是我在页面上使用的一个简单快捷的示例CSS：

span { color: black;
       font-family: "Lucida Console", Monaco, monospace;
       border: 1px solid black;
       background-image: repeating-linear-gradient(90deg, white, white 13.5px, black 14.5px);
}

重要的是repeating-linear-gradient()。我只是经过反复尝试才能得出与背景完全一致的值13.5px和14.5px。

每个字母周围的框用css而不使用跨度

7 个答案: