css3 漂亮的ol

CSS3 给我们带来了各种漂亮的样式和效果，其中之一就是 “漂亮的 ol”。下面是一个示例：

ol {
    counter-reset: item;
    margin: 0;
    padding: 0;
    list-style-type: none;
}
li {
    display: block;
    margin-bottom: .5em;
    position: relative;
    padding-left: 2em;
}
li:before {
    display: block;
    position: absolute;
    top: -.2em;
    left: -1.5em;
    width: 1em;
    height: 1em;
    content: counter(item);
    counter-increment: item;
    background: #2d38ff;
    color: #fff;
    text-align: center;
    font-weight: bold;
    line-height: 1.6em;
    border-radius: 999px;
}
    

上面的代码为我们展示了如何使用 CSS3 创建一个漂亮的 ol 列表。首先，我们重置了 counter，并将 margin 和 padding 置为了 0，把 list-style-type 设置为 none。接下来，我们设置了 li 的显示方式为 block，并为其设置了一些外观属性，如 margin 和 position。最后，我们使用了 li:before 伪元素，为其创建了一个圆形背景，并在其中显示了计数器的值。

这种样式和效果让列表更具有视觉吸引力，同时也提高了用户体验。CSS3 的各种功能和特性为我们提供了更多的设计选项，帮助我们创建出更加优美的网站和应用程序。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！