css的常见小图标的制作
使用计数器实现带有序号的列表
<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;
}