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);
}

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值