如下圖，如果是你，你會怎么實現(xiàn)：

通常我們會通過字體圖標來顯示中間的加號，外層用一個div包裹即可；或者使用偽元素來模擬中間的一橫一豎，這都比較麻煩。

其實我們可以直接使用div+css就可以實現(xiàn)。

輪廓屬性outline

outline屬性是用來設置一個或多個單獨的輪廓屬性的簡寫屬性 ， 例如 。

輪廓有下面幾個屬性：

{
    outline-style: solid;
    outline-width: 10px;
    outline-color: red;
}

他們有一種簡寫形式：

{
    outline: 10px solid red;
}

輪廓的特點

輪廓不占據(jù)空間，它們被描繪于內容之上。

可以做到下圖的效果：

我發(fā)現(xiàn)，當設置 outline-offset 為負值的時候，輪廓會出現(xiàn)在div的內部，如果繼續(xù)擴大其負值，最終輪廓會收縮成一個“➕”加號，正好可以作為文件上傳樣式中間的加號。

這就有意思了，于是代碼就來了：

div {
    margin: 100px;
    width: 100px;
    height: 100px;
    outline: 15px solid #545454;
    outline-offset: -66px;
    border: 2px solid #545454;
}

outline-offset: -66px; 是關鍵，它表示輪廓距div邊的距離，如果為負值則會往里面收縮，最后形成一個加號。具體上傳樣式的大小和outline的寬度都需要自己慢慢調整已達到大和諧。

需要注意的是：

容器得是個正方形

outline 邊框本身的寬度不能太小

原文github倉庫地址：https://github.com/Daotin/front-end-notes/issues

總結

以上所述是小編給大家介紹的使用css畫一個文件上傳圖案，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！

最新評論