javascript - 使 css 数字看起来漂亮

Question

我有这个 fiddle 中的代码

.numberCircle {
  border-radius: 10%;
  behavior: url(PIE.htc);
  /* remove if you don't care about IE8 */
  width: 36px;
  height: 36px;
  display: table;
  padding: 10px;
  margin-top: 15px;
  background: #fff;
  border: 2px solid #666;
  color: #666;
  text-align: center;
  font: 28px Arial, sans-serif;
}

<div class="numberCircle">368585760</div>

感谢拥有这个 fiddle 的人，我用我的更改更新了它:，现在不添加额外的 html 元素，是否可以将框中的每个数字设计成这样

http://prntscr.com/gi26iz

我尝试使用 css3 第一个 child 、第二个 child 等等，但我不确定该怎么做。

Answer 1

如果您不能更改标记，您可以使用 jquery 尝试此操作 - 替换每个数字 wrapped 的 div 内容到 span.

观看演示以帮助您入门:

var html = $('.numberCircle')
  .text()
  .split('').map(function(e){
     return "<span>" + e + "</span>";
  }).join('');
$('.numberCircle').html(html);

.numberCircle span {
  border-radius: 10%;
  behavior: url(PIE.htc);
  /* remove if you don't care about IE8 */
  width: 36px;
  height: 36px;
  /*display: table;*/
  display: inline-block; /* CHANGED */
  padding: 10px;
  margin: 15px;
  background: #fff;
  border: 2px solid #666;
  color: #666;
  text-align: center;
  font: 28px Arial, sans-serif;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="numberCircle">368585760</div>