怎么使用css畫一個(gè)文件上傳圖案-創(chuàng)新互聯(lián)

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

創(chuàng)新互聯(lián)堅(jiān)信：善待客戶，將會(huì)成為終身客戶。我們能堅(jiān)持多年，是因?yàn)槲覀円恢笨芍档眯刨?。我們從不忽悠初訪客戶，我們用心做好本職工作，不忘初心，方得始終。10余年網(wǎng)站建設(shè)經(jīng)驗(yàn)創(chuàng)新互聯(lián)是成都老牌網(wǎng)站營(yíng)銷服務(wù)商,為您提供網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站、網(wǎng)站設(shè)計(jì)、HTML5建站、網(wǎng)站制作、成都品牌網(wǎng)站建設(shè)、小程序開發(fā)服務(wù),給眾多知名企業(yè)提供過好品質(zhì)的建站服務(wù)。

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

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

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

輪廓屬性outline

outline屬性是用來設(shè)置一個(gè)或多個(gè)單獨(dú)的輪廓屬性的簡(jiǎn)寫屬性 ， 例如 。

輪廓有下面幾個(gè)屬性：

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

他們有一種簡(jiǎn)寫形式：

{
    outline: 10px solid red;
}

輪廓的特點(diǎn)

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

可以做到下圖的效果：

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

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

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

outline-offset: -66px; 是關(guān)鍵，它表示輪廓距div邊的距離，如果為負(fù)值則會(huì)往里面收縮，最后形成一個(gè)加號(hào)。具體上傳樣式的大小和outline的寬度都需要自己慢慢調(diào)整已達(dá)到大和諧。

需要注意的是：

容器得是個(gè)正方形

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

看完了這篇文章，相信你對(duì)“怎么使用css畫一個(gè)文件上傳圖案”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

分享題目：怎么使用css畫一個(gè)文件上傳圖案-創(chuàng)新互聯(lián)
文章鏈接：http://muchs.cn/article10/djgggo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供動(dòng)態(tài)網(wǎng)站、商城網(wǎng)站、定制開發(fā)、面包屑導(dǎo)航、響應(yīng)式網(wǎng)站、網(wǎng)站策劃

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)