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

.triangle{
	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);

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