【CSS】用CSS绘制图标（图标大全）

ゞ浴缸里的玫瑰 2022-06-05 11:15 496阅读 0赞

转载请务必注明出处，也不枉我这么辛苦打上来。谢谢啦！  
技艺不精，若有纰漏，还请不吝指出。

*  **暂停按钮**  
    ![这里写图片描述][SouthEast]

*  **加号按钮**  
    ![这里写图片描述][SouthEast 1]

.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>

*  **关闭按钮**  
    ![这里写图片描述][SouthEast 2]

*  **菜单按钮**  
    ![这里写图片描述][SouthEast 3]

用阴影实现

用背景裁剪实现

用渐变函数

*  **文章图标**  
    ![这里写图片描述][SouthEast 4]

*  **单选按钮**

![这里写图片描述][SouthEast 5]

*  **靶子图标**

![这里写图片描述][SouthEast 6]

*  **田字图标**  
    ![这里写图片描述][SouthEast 7]

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

*  **下载箭头**

![这里写图片描述][SouthEast 8]

.box{ width: 0; color: #000; border: 8px solid transparent; border-top: 8px solid; box-shadow: 0 -12px 0 -4px; }

*  **下载箭头(带横线)**

![这里写图片描述][SouthEast 9]

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

*  **禁用图标**  
    ![这里写图片描述][SouthEast 10]

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

还有很多的图标等待大家去开发，我这列举几个常用的而已，抛砖引玉。有什么好的图标，还希望大家在博文下回复讨论。  
谢谢。  
挚谢阅读。

[SouthEast]: /images/20220605/1f0a7382cb1d4a79b617845d8bd18d3d.png
[SouthEast 1]: /images/20220605/3fb5d96ca0954977a995c08d0ba5aa62.png
[SouthEast 2]: /images/20220605/6f309dcfd60146689ec383a0bd39f06e.png
[SouthEast 3]: /images/20220605/ca69315e1f1c442aa2bc7fbe71ffbdc2.png
[SouthEast 4]: /images/20220605/e450588d834e4e6c8fa5f814cb1370f7.png
[SouthEast 5]: /images/20220605/b455e4278979425ba94073c80863a2e7.png
[SouthEast 6]: /images/20220605/467566f55031483fbcbe87a2b8bed7b6.png
[SouthEast 7]: /images/20220605/74dc0c20107748ea963a4838122a2ba2.png
[SouthEast 8]: /images/20220605/21c471c78e754ae7be34f13265bcad71.png
[SouthEast 9]: /images/20220605/8f1abc35977748b3a5a0929b684e1db1.png
[SouthEast 10]: /images/20220605/b677f35f3984493281b67b7c6813092e.png