小編給大家分享一下怎么使用css畫一個文件上傳圖案，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

創新互聯堅信：善待客戶，將會成為終身客戶。我們能堅持多年，是因為我們一直可值得信賴。我們從不忽悠初訪客戶，我們用心做好本職工作，不忘初心，方得始終。10余年網站建設經驗創新互聯是成都老牌網站營銷服務商,為您提供網站設計、成都做網站、網站設計、HTML5建站、網站制作、成都品牌網站建設、小程序開發服務,給眾多知名企業提供過好品質的建站服務。

如下圖，如果是你，你會怎么實現：

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

其實我們可以直接使用div+css就可以實現。

輪廓屬性outline

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

輪廓有下面幾個屬性：

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

他們有一種簡寫形式：

{
    outline: 10px solid red;
}

輪廓的特點

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

可以做到下圖的效果：

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

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

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

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

需要注意的是：

容器得是個正方形

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

看完了這篇文章，相信你對“怎么使用css畫一個文件上傳圖案”有了一定的了解，如果想了解更多相關知識，歡迎關注創新互聯行業資訊頻道，感謝各位的閱讀！

分享題目：怎么使用css畫一個文件上傳圖案-創新互聯
文章鏈接：http://vcdvsql.cn/article10/djgggo.html

成都網站建設公司_創新互聯，為您提供動態網站、商城網站、定制開發、面包屑導航、響應式網站、網站策劃

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯