转载请务必注明出处，也不枉我这么辛苦打上来。谢谢啦！
技艺不精，若有纰漏，还请不吝指出。
- 暂停按钮
<style>
.box{
width: 50px;
height: 50px;
background-color: white;
border: 1px solid black;
border-radius: 100%;
outline: 10px solid black;
outline-offset: -27px;
cursor: pointer;
}
</style>
<body>
<div class="box"></div>
</body>- 加号按钮
.box{
width: 50px;
height: 50px;
background-color: white;
border: 1px solid black;
border-radius: 100%;
outline: 10px solid black;
outline-offset: -35px;
cursor: pointer;
}
</style>
<body>
<div class="box"></div>
</body>- 关闭按钮
<style>
.box{
width: 50px;
height: 50px;
background-color: black;
border: 1px solid white;
border-radius: 100%;
outline: 15px solid white;
outline-offset: -39px;
cursor: pointer;
transform: rotate(45deg);
}
</style>
<body>
<div class="box"></div>
</body>- 菜单按钮
用阴影实现
<style>
.box{
width: 30px;
height: 0;
color: black;
box-shadow: 20px 10px 0 3px ,20px 0 0 3px ,20px 20px 0 3px;
}
</style>
<body>
<div class="box"></div>
</body>用背景裁剪实现
<style>
.box{
width: 30px;
height: 5px;
padding: 5px 0;
border-top: 5px solid black;
border-bottom: 5px solid black;
background-clip: content-box;
background-color: black;
}
</style>
<body>
<div class="box"></div>
</body>用渐变函数
<style>
.box{
width: 30px;
height: 15px;
background: linear-gradient(to bottom,black 0%,black 0%,transparent 20%,transparent 40%, black 40%,black 40%,transparent 60%,transparent 80%,black 100%);
}
</style>
<body>
<div class="box"></div>
</body>- 文章图标
<style>
.box{
width: 30px;
height: 15px;
background: linear-gradient(to bottom,black 0%,black 0%,transparent 20%,transparent 40%, black 40%,black 40%,transparent 60%,transparent 80%,black 100%);
outline: 1px solid black;
outline-offset: 4px;
}
</style>
<body>
<div class="box"></div>
</body>- 单选按钮
<style>
.box{
width: 16px;
height: 16px;
background-color: black;
border-radius: 100%;
box-shadow: 0 0 0 5px #fff,0 0 0 10px #000;
}
</style>
<body>
<div class="box"></div>
</body> <style>
.box{
width: 16px;
height: 16px;
padding: 7px;
border: 3px solid green;
border-radius: 100%;
background-clip: content-box;
background-color: green;
}
</style>
<body>
<div class="box"></div>
</body>- 靶子图标
<style>
.box{
width: 16px;
height: 16px;
background-color: black;
border-radius: 100%;
box-shadow: 0 0 0 3px #fff,0 0 0 5px #000;
outline: 18px solid #ffffff;
outline-offset: -25px;
transform: scale(1.5);
}
</style>
<body>
<div class="box"></div>
</body>- 田字图标
.box{
width:0;
color: #000;
border: 3px solid black;
outline: 6px dotted ;
outline-offset: 6px;
}.box{
width:0;
padding: 3px;
background-color: black;
outline: 6px dotted black;
outline-offset: 6px;
}.box{
height: 6px;
width: 6px;
background-color: black;
outline: 6px dotted black;
outline-offset: 6px;
}- 下载箭头
.box{
width: 0;
color: #000;
border: 8px solid transparent;
border-top: 8px solid;
box-shadow: 0 -12px 0 -4px;
}- 下载箭头(带横线)
.box{
width: 1px;
height: 6px;
color: #000;
border: 8px solid transparent;
border-top: 8px solid;
box-shadow: 0 -12px 0 -4px;
background: linear-gradient(to bottom,#ffffff 50%,#000000 50%) repeat-x;
}- 禁用图标
.box{
width: 20px;
height: 20px;
border-radius: 100%;
border: 2px solid #000000;
background: linear-gradient(to right,#ffffff 45%,#000000 45%,#000 55%,#fff 55%);
transform:rotate(40deg);
}还有很多的图标等待大家去开发，我这列举几个常用的而已，抛砖引玉。有什么好的图标，还希望大家在博文下回复讨论。
谢谢。
挚谢阅读。