ul列表li标签前加带有颜色的圆点技巧

项目开发中，ul列表布局时li标签带有样式圆点？？应该如何去处理呢？
一般情况下，默认的li标签前是有黑色小圆点，但是其颜色无法改变。
在布局初始化的时候我们会去掉默认样式。

所以，今天就为大家讲解一个小技巧来解决这个问题。
代码如下：
利用伪标签，使用css中的圆角border-radius: 50%;来实现

 li:before {
     
           content: "";
           width: 6px;
           height: 6px;
           display: inline-block;
           border-radius: 50%;
           background: #4F8EFF;
           vertical-align: middle;
           margin-right: 14px;
           }

效果图如下：

如果要实现如下样式呢？

当然是设置它的 border: solid 4px #bec1ca;

.dot {
                    
 width: 14px;          
 height: 14px;              
border-radius: 50%;           
box-sizing: border-box;      
border: solid 4px #bec1ca;   
                               
                                   

• 如何实现三角形呢？
  利用盒子模型的特性，设置器border相关的属性：
  注意点：若盒子模型为border-box时，当border-width>width的时候其width==border-width

.hhh{
     
				box-sizing: border-box;
				border-width: 20px;
				width:0;
				height:0;
				border-style: solid;
                border-color: #008000 transparent transparent transparent;
			}

• 如何画一条0.5px的直线呢？

  1. 注意点：height是不能设置成0.5px，最小是1px

  2. scale(x,y)
     定义：
     基于原来的位置进行伸缩变换，其中x代表沿X轴的伸缩倍数，y代表沿Y轴的伸缩倍数
     语法：

     transform：scale(x,y);

     p   {
     
				width:200px;
				position: absolute;
				/* height:0.5px; */
				background-color: #0000FF;
				height: 1px;
				transform: scaleY(0.5);
			}