Html 如何创建紧密排列在一起的多行点？

我感兴趣的是创建一系列非常紧密的点，比如彭博网站上的点：

我如何创建这个？我特别不知道如何在行之间创建紧密的紧凑线

.underlined {
    border-bottom: 1px dotted #000;
    text-decoration:none;
    padding:0px;
}

---

提前谢谢

可在此链接中找到解决方案

虚线
@导入url(http://fonts.googleapis.com/css?family=Oswald);
div{
文本对齐：居中；
字体：粗体21px“Oswald”，无衬线；
文本阴影：1px1px0#fff，2px2px0#999；
文本转换：大写；
}
.点点{
填充物：2.25em 1.6875em；
背景图像：-webkit重复径向渐变（中心，rgba（0,0,0,2），rgba（0,0,0,2）1px，透明1px，透明100%）；
背景图像：-moz重复径向梯度（中心，rgba（0,0,0,2），rgba（0,0,0,2）1px，透明1px，透明100%）；
背景图像：-ms重复径向梯度（中心，rgba（0,0,0,2），rgba（0,0,0,2）1px，透明1px，透明100%）；
背景图像：重复径向梯度（中心，rgba（0,0,0,2），rgba（0,0,0,2）1px，透明1px，透明100%）；
-webkit背景尺寸：3px 3px；
-moz背景尺寸：3px 3px；
背景尺寸：3px 3px；
}

检查元件

一小条

.dots{
线高：17px；
}
.点：之前{
背景：url（数据：image/png；base64，ivborw0kggoaaansuhuugaaaaaaaaackayaaabytg0kaaafulleqvqiw2p83sf3n7xoEsmjaxqaadjfbapqojzeaaaelftksuqmcc）重复；
文本缩进：-119988px；
溢出：隐藏；
文本对齐：左对齐；
文本转换：大写；
内容：“图案点”；
高度：1.25雷姆；
宽度：100%；
显示：块；
}

---

了解了模式，请查看我的答案。实际解决方案是@zer00ne的答案。背景图像是什么？一个小橙色点的gif，2x2px，如果我没记错的话。然后在div的尺寸参数范围内水平和垂直重复该操作。幸运的是，只需要少一个http请求。

<div class="dotted">Dotted</div>
<style>
  @import url(http://fonts.googleapis.com/css?family=Oswald);
  div {
    text-align: center;
    font: bold 21px 'Oswald',sans-serif;
    text-shadow: 1px 1px 0 #fff, 2px 2px 0 #999;
    text-transform: uppercase;
  }
  .dotted {
    padding: 2.25em 1.6875em;
    background-image: -webkit-repeating-radial-gradient(center center, rgba(0,0,0,.2), rgba(0,0,0,.2) 1px, transparent 1px, transparent 100%);
    background-image: -moz-repeating-radial-gradient(center center, rgba(0,0,0,.2), rgba(0,0,0,.2) 1px, transparent 1px, transparent 100%);
    background-image: -ms-repeating-radial-gradient(center center, rgba(0,0,0,.2), rgba(0,0,0,.2) 1px, transparent 1px, transparent 100%);
    background-image: repeating-radial-gradient(center center, rgba(0,0,0,.2), rgba(0,0,0,.2) 1px, transparent 1px, transparent 100%);
    -webkit-background-size: 3px 3px;
    -moz-background-size: 3px 3px;
    background-size: 3px 3px;
  }

</style>