亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專(zhuān)欄INFORMATION COLUMN

CSS揭秘之《邊框圖像》

Pikachu / 1502人閱讀

摘要：如果我們想把一圖應(yīng)用到邊框而非背景，就像下面的這樣效果可能最容易的方法就是兩層標(biāo)簽，外層標(biāo)簽設(shè)置背景圖片，內(nèi)層標(biāo)簽設(shè)置背景色為白色就達(dá)到了效果，可是如果只用一層標(biāo)簽?zāi)兀趺崔k其實(shí)思路是在背景圖片之上，再疊加一層純白的實(shí)色背景代碼如下

如果我們想把一圖應(yīng)用到邊框而非背景，就像下面的這樣效果

可能最容易的方法就是兩層標(biāo)簽，外層標(biāo)簽設(shè)置背景圖片，內(nèi)層標(biāo)簽設(shè)置背景色為白色就達(dá)到了效果，可是如果只用一層標(biāo)簽?zāi)?，怎么辦？
其實(shí)思路是在背景圖片之上， 再疊加一層純白的實(shí)色背景
代碼如下：

        div {
            padding: 1em;
            border: 1em solid transparent;
            background: linear-gradient(white, white),
            url(../images/stone-art.jpg);
            background-size: cover;
            background-clip: padding-box, border-box;
            background-origin: border-box;
        }

或者再簡(jiǎn)寫(xiě)一下就是：

        div {
            padding: 1em;
            border: 1em solid transparent;
            background: linear-gradient(white, white) padding-box, url(../images/stone-art.jpg) border-box 0 / cover; 
        }

具體效果見(jiàn)鏈接
再擴(kuò)展一下，如果要實(shí)現(xiàn)如下所示的邊框圖像，像信封一下的效果，怎么辦


其實(shí)有兩種方式

使用repeating-linear-gradient

        div {
            padding: 1em;
            border: 1em solid transparent;
            background: linear-gradient(white, white) padding-box,
            repeating-linear-gradient(-45deg, red 0, red 12.5%, transparent 0, transparent 25%,
            #58a 0, #58a 37.5%, transparent 0, transparent 50%) 0 / 6em 6em;

            max-width: 20em;
            font: 100%/1.6 Baskerville, Palatino, serif;
        }

具體效果見(jiàn)鏈接

使用border-image

        div {
            padding: 1em;
            border: 16px solid transparent;
            border-image: 16 repeating-linear-gradient(-45deg, red 0, red 1em, transparent 0, transparent 2em,
            #58a 0, #58a 3em, transparent 0, transparent 4em);

            max-width: 20em;
            font: 100%/1.6 Baskerville, Palatino, serif;
        }

具體效果見(jiàn)鏈接
但是使用border-image 方法存在一些問(wèn)題

每當(dāng)我們改變 border-image-slice 時(shí)， 都需要同時(shí)修改 borderwidth 來(lái)讓它們相互匹配

由于我們不能在 border-image-slice 屬性中使用 em 單位， 只能把
邊框厚度指定為像素單位

條紋的寬度需要在色標(biāo)的位置信息中寫(xiě)好， 因此我們?cè)诟淖儣l紋寬
度時(shí)， 需要修改四處

先暫時(shí)寫(xiě)到這里后續(xù)再補(bǔ)充

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/85200.html

相關(guān)文章

  • CSS揭秘之《邊框圖像》

    摘要：如果我們想把一圖應(yīng)用到邊框而非背景，就像下面的這樣效果可能最容易的方法就是兩層標(biāo)簽，外層標(biāo)簽設(shè)置背景圖片，內(nèi)層標(biāo)簽設(shè)置背景色為白色就達(dá)到了效果，可是如果只用一層標(biāo)簽?zāi)?，怎么辦其實(shí)思路是在背景圖片之上，再疊加一層純白的實(shí)色背景代碼如下 如果我們想把一圖應(yīng)用到邊框而非背景，就像下面的這樣效果 showImg(https://segmentfault.com/img/bVUhG5?w=194...

    TalkingData 評(píng)論0 收藏0

  • [CSS]《CSS揭秘》第二章——背景與邊框

    摘要：半透明邊框相關(guān)語(yǔ)法多重邊框方案需要注意的是，上面所創(chuàng)建的邊框是偽邊框，并不響應(yīng)鼠標(biāo)事件。方案以左上角為基準(zhǔn)。圖像邊框連續(xù)的圖像邊框?qū)傩砸?guī)定背景的繪制區(qū)域。 半透明邊框 border:10px solid hsla(0,0%,100%,.5); background: white; background-clip: padding-box; showImg(htt...

    elina 評(píng)論0 收藏0

  • CSS揭秘之《條紋背景》

    摘要：先來(lái)說(shuō)說(shuō)漸變吧效果圖如下所示也就是說(shuō)真正的漸變只出現(xiàn)在容器從到的高度區(qū)域如果把兩個(gè)色標(biāo)合在一起，會(huì)怎樣呢是這樣規(guī)定的如果多個(gè)色標(biāo)具有相同的位置，它們會(huì)產(chǎn)生一個(gè)無(wú)限小的過(guò)渡區(qū)域，過(guò)渡的起止色分別是第一個(gè)和最后一個(gè)指定值。 先來(lái)說(shuō)說(shuō)漸變吧 background: linear-gradient(#fb3 20%, #58a 80%); 效果圖如下所示：也就是說(shuō)真正的漸變只出現(xiàn)在容器 60%...

    jsliang 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<