css中一些常见小图标的制作
作者：互联网
css的常见小图标的制作
使用计数器实现带有序号的列表
-
计数器的使用
counter-reset: 计数器的名称 起始值(默认为0); 对计数器进行初始化 counter-increament: 计数器名称 步长(默认为1) 对计数器进行一次普照，使初始化 增加步长 counter(计数器名称) 在content属性中获取计数器输出 的值
<ul>
<li>我是无序列表的第一行文本</li>
<li>我是无序列表的第二行文本</li>
<li>我是无序列表的第三行文本</li>
<li>我是无序列表的第四行文本</li>
<li>我是无序列表的第五行文本</li>
<li>我是无序列表的第六行文本</li>
</ul>
/* 在父元素中初始化计数器 */
ul {
/* 计数器的名称＋起始位置 */
counter-reset: num 0;
list-style: none;
padding: 50px;
line-height: 30px;
}
ul li::before {
counter-increment: num;
content: counter(num);
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50%;
background: pink;
text-align: center;
line-height: 20px;
margin-right: 10px;
color: #fff;
}
制作双层圆点
-
只用一层标签，不需要使用伪元素
<body>
<div></div>
</body>
div {
width: 30px;
height: 30px;
border-radius: 50%;
background-color: skyblue;
padding: 3px;
border: 2px solid #666666;
background-clip: content-box;
}
制作三道杠
-
只使用一个盒子
<body>
<div></div>
</body>
div {
width: 40px;
height: 29px;
border-top: 3px solid #666;
border-bottom: 3px solid #666;
background-color: #666;
padding: 10px 0;
box-sizing: border-box;
background-clip: content-box;
}
自定义浏览器滚动条样式
html::-webkit-scrollbar { 滚动条宽度
width: 10px;
}
html::-webkit-scrollbar-thumb { 滑块的样式
background-color: rgba(0,0,0,.3);
border-radius: 5px;
}
html::-webkit-scrollbar-track { 轨道的样式
background-color: #ddd;
border-radius: 5px;
}
标签：color,制作,counter,列表,计数器,background,border,小图标,css 来源： https://www.cnblogs.com/Dqarden/p/15096444.html