CSS揭秘之《邊框圖像》

Pikachu 發布于2019-08-20 19:08 / 1456人閱讀

摘要：如果我們想把一圖應用到邊框而非背景，就像下面的這樣效果可能最容易的方法就是兩層標簽，外層標簽設置背景圖片，內層標簽設置背景色為白色就達到了效果，可是如果只用一層標簽呢，怎么辦其實思路是在背景圖片之上，再疊加一層純白的實色背景代碼如下

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

可能最容易的方法就是兩層標簽，外層標簽設置背景圖片，內層標簽設置背景色為白色就達到了效果，可是如果只用一層標簽呢，怎么辦？
其實思路是在背景圖片之上，再疊加一層純白的實色背景
代碼如下：

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

或者再簡寫一下就是：

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

具體效果見鏈接
再擴展一下，如果要實現如下所示的邊框圖像，像信封一下的效果，怎么辦

其實有兩種方式

使用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;
        }

具體效果見鏈接

使用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;
        }

具體效果見鏈接
但是使用border-image 方法存在一些問題

每當我們改變 border-image-slice 時，都需要同時修改 borderwidth 來讓它們相互匹配

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

條紋的寬度需要在色標的位置信息中寫好，因此我們在改變條紋寬
度時，需要修改四處

先暫時寫到這里后續再補充

GPU云服務器云服務器大揭秘揭秘云存儲云計算揭秘人工智能揭秘

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/85200.html

CSS揭秘之《邊框圖像》

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

TalkingData 2019-08-29 13:19 評論0 收藏0
[CSS]《CSS揭秘》第二章——背景與邊框

摘要：半透明邊框相關語法多重邊框方案需要注意的是，上面所創建的邊框是偽邊框，并不響應鼠標事件。方案以左上角為基準。圖像邊框連續的圖像邊框屬性規定背景的繪制區域。半透明邊框 border:10px solid hsla(0,0%,100%,.5); background: white; background-clip: padding-box; showImg(htt...

elina 2019-08-30 15:53 評論0 收藏0
CSS揭秘之《條紋背景》

摘要：先來說說漸變吧效果圖如下所示也就是說真正的漸變只出現在容器從到的高度區域如果把兩個色標合在一起，會怎樣呢是這樣規定的如果多個色標具有相同的位置，它們會產生一個無限小的過渡區域，過渡的起止色分別是第一個和最后一個指定值。先來說說漸變吧 background: linear-gradient(#fb3 20%, #58a 80%); 效果圖如下所示：也就是說真正的漸變只出現在容器 60%...

jsliang 2019-08-20 19:08 評論0 收藏0