必看！用CSS命令繪制常用小圖標，手把手教你操作

web開發中，我們經常要用到一些小圖標（加減勾叉等）。通常做法就兩種：

1、直接使用圖片；

2、使用css/svg直接在瀏覽器中繪制圖標；

方案1

由于圖標圖片比較多，而且體積很小，為了減少請求，我們需要用雪碧圖將圖標拼湊在同一張圖片里面，修改維護十分麻煩！

現在比較好的方案是使用webpack引入圖片，小圖直接轉換成base64插入css中。直接使用圖片比較簡單，這也是目前比較主流的做法。

● 方案2

相比方案1，明顯可以減小資源的體積，只需要幾條css/svg命令就可以繪制出精美的圖標，而且不受圖片尺寸限制，可大可小非常靈活。

初看方案2的一堆代碼可能會覺得非常難，但其實很多簡單的圖標都是非常容易實現的。

接下來就是同學們最期待的小智手把手教學時間啦。

01 暫停按鈕

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

02 加號按鈕

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

03 關閉按鈕

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

04 菜單按鈕

用陰影實現

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

05 文章圖標

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

06 單選按鈕

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

07 靶子圖標

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

08 田字圖標

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

09 下載箭頭

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

10 下載箭頭（帶橫線）

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

11 禁用圖標

者：前端日志

轉發鏈接：https://mp.weixin.qq.com/s/c-Us1Nm_8BqRD2Vc0l9emA

沒出現css動畫效果之前要實現動的圖標，一般都是插入一張gif的圖片去實現，隨著CSS3技術的流行，現在越來越多比較高級炫酷的網頁效果呈現，今天用css代碼實現一組天氣網站常用到的圖標！

如下：

預覽起來是可以動起來的，這里只截靜態圖片！

實現方法

html結構：

css樣式：

在線咨詢

上一篇：“非接觸式”辦稅丨電子稅務局如何快速辦理稅務注銷
下一篇：HTML+JS實現圖片下載到本地

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

必看！用CSS命令繪制常用小圖標，手把手教你操作

您的項目需求