css小圆点怎么写 |css 按钮 点击效果

ul li {
list-style: none; /*去掉默认的列表符号*/
position: relative;
padding-left: 20px; /*用于留出空间来放置小圆点*/
}
ul li::before {
content: ""; /*插入空的内容*/
display: block; /*将伪元素设为块级元素*/
position: absolute;
left: 0;
top: 50%; /*将圆点定位在列表项中垂直居中的位置*/
width: 10px;
height: 10px;
margin-top: -5px; /*将圆点向上偏移一半高度，使其实现垂直居中*/
background-color: #000; /*设置圆点的颜色*/
border-radius: 50%; /*将圆点设置为圆形*/
}

上述代码中，大家首先将ul li的列表默认样式去掉，然后给每个li添加一个伪元素:before，这个元素是真正的小圆点。在:before伪元素中，通过设置position:absolute和top:50%，使其定位在列表项中间上下居中的位置，然后通过设置margin-top:-5px将其向上偏移一半高度，实现完全的垂直居中。设置height和width的值，同时设置background-color和border-radius，使这个伪元素呈现出小圆点的样式。

当然，如果你想要实现不同颜色、大小或形状的小圆点，以上代码只需稍加修改即可。总之，CSS小圆点的写法极其简单易懂，适合初学者使用。希望本文对大家的学习有所帮助！