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

您所在的位置:网站首页 chemdraw小圆点怎么画 ul列表li标签前加带有颜色的圆点技巧

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

2023-12-07 11:56| 来源: 网络整理| 查看: 265

项目开发中,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的直线呢?

注意点:height是不能设置成0.5px,最小是1px

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

在这里插入图片描述



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3