css3li小圆点

在网页设计中，有时我们需要添加一些小圆点来分隔不同的内容，CSS3中提供了一种方便实用的样式——list-style-type：none，可以快速实现小圆点的效果。

/* HTML代码 */ul>
    li>
    第一条内容 /li>
    li>
    第二条内容 /li>
    li>
    第三条内容 /li>
    /ul>
/* CSS代码 */ul {
    list-style-type: none;
}
li:before {
    content: "•";
    color: #999;
    margin-right: 5px;
}
    

注意，使用list-style-type：none可以去掉原本的圆点，接着通过:before伪元素加入新的小圆点。其中“•”为小圆点的实体字符，也可以使用Unicode十六进制（\002022）或八进制(& #8226; )编码。

还可以通过list-style-position：inside属性来将小圆点放在文本内部，同时调整margin使其紧贴文本。代码如下：

/* CSS代码 */ul {
    list-style-type: none;
}
li:before {
    content: "•";
    color: #999;
    margin-right: 5px;
    margin-left: -15px;
}
    

以上方法适用于ul、ol等有序或无序列表，如果想单独为一个元素加入小圆点，可以使用padding和background实现：

/* HTML代码 */p class="dot">
    这是一条带小圆点的文本/p>
/* CSS代码 */.dot {
    padding-left: 10px;
    background: url("dot.png") no-repeat left center;
 /* dot.png为小圆点的图片 */}
    

通过设置背景图片和内边距，可以对文本任意位置加入小圆点，图形也可以自定义。

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