博客

项目开发中，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);
			}