Html UL列出具有样式化十进制数字的项目

我需要创建一组列表项，其中我需要使用边框半径和背景色设置列表项编号（小数）的样式

下面是我希望列表项的外观的快照

我试图在li上设置边界半径、背景，但无法获得我要查找的输出

以下是我迄今为止所尝试的。我删除了边界半径、背景等，因为它没有正确显示

HTML:

<ul>
    <li>Text Character</li>
    <li>Text Character</li>
    <li>Text Character</li>
    <li>Text Character</li>
    <li>Text Character</li>
</ul>

li{list-style-type:decimal;}

我希望上述解决方案提供如下

• 它不应该是精灵/背景图像解决方案
• 我只是在寻找一种解决方案，我必须在列表项上使用边框半径和背景色，我尝试过，但无法按照我在参考图像中想要的方式工作

等待解决方案。

这里有一个小技巧：

ol{
计数器重置：项目；
左边距：0；
左侧填充：0；
}
李{
显示：块；
边缘底部：.5em；
左边距：2米；
}
李：以前{
显示：内联块；
内容：柜台（项目）“；
反增量：项目；
背景：蓝色；
颜色：白色；
显示：内联块；
边界半径：50%；
利润率：0.5px；
填充：0 5px；
}

项目1
项目2
项目3
项目4

您是否尝试过在li上使用背景图像？我不是在寻找背景图像/精灵解决方案。我只是在寻找一种解决方案，我必须在列表项上使用边界半径和背景色，我尝试过，但无法按照我在参考图像中想要的方式工作。-@furrie

border radius

本身就很难解决这个问题，因为要实现具有边界半径的圆，它意味着元素需要

0

宽度/高度，我认为。。。我相信这会使内容（即里面的小数点）不可读。从标记的角度来看：为什么不使用有序列表呢（）？如果我得到一个带有边框半径和背景颜色的解决方案，我切换到

不会有问题。如果您有

的解决方案，请继续-@mightyuhuI在Webkit浏览器上获得方块…：萨尔索，这并不是说要说坏话，但是如果子弹的长度太大，这个形状就像一颗药丸……：）它对我有用。谢谢你-@jonasgrumann你说得对，Joum，但是如果名单变得很长怎么办？你想要一个有4个数字的大圆圈，还是想要一颗药丸？老实说，我更喜欢皮勒姆。。。这个JSFiddle链接不知怎么被劫持了，带你去看一个西班牙iphone5c广告。