資訊專欄INFORMATION COLUMN
摘要：如果我們想把一圖應用到邊框而非背景，就像下面的這樣效果可能最容易的方法就是兩層標簽，外層標簽設置背景圖片，內層標簽設置背景色為白色就達到了效果，可是如果只用一層標簽呢，怎么辦其實思路是在背景圖片之上，再疊加一層純白的實色背景代碼如下
如果我們想把一圖應用到邊框而非背景，就像下面的這樣效果
可能最容易的方法就是兩層標簽，外層標簽設置背景圖片，內層標簽設置背景色為白色就達到了效果，可是如果只用一層標簽呢，怎么辦？
其實思路是在背景圖片之上， 再疊加一層純白的實色背景
代碼如下：
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;
}
具體效果見鏈接
再擴展一下，如果要實現(xiàn)如下所示的邊框圖像，像信封一下的效果，怎么辦
其實有兩種方式
使用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 單位， 只能把
邊框厚度指定為像素單位
條紋的寬度需要在色標的位置信息中寫好， 因此我們在改變條紋寬
度時， 需要修改四處
先暫時寫到這里后續(xù)再補充
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉載請注明本文地址：http://systransis.cn/yun/85200.html
摘要：如果我們想把一圖應用到邊框而非背景，就像下面的這樣效果可能最容易的方法就是兩層標簽，外層標簽設置背景圖片，內層標簽設置背景色為白色就達到了效果，可是如果只用一層標簽呢，怎么辦其實思路是在背景圖片之上，再疊加一層純白的實色背景代碼如下 如果我們想把一圖應用到邊框而非背景，就像下面的這樣效果 showImg(https://segmentfault.com/img/bVUhG5?w=194...
摘要：半透明邊框相關語法多重邊框方案需要注意的是，上面所創(chuàng)建的邊框是偽邊框，并不響應鼠標事件。方案以左上角為基準。圖像邊框連續(xù)的圖像邊框屬性規(guī)定背景的繪制區(qū)域。 半透明邊框 border:10px solid hsla(0,0%,100%,.5); background: white; background-clip: padding-box; showImg(htt...
摘要：先來說說漸變吧效果圖如下所示也就是說真正的漸變只出現(xiàn)在容器從到的高度區(qū)域如果把兩個色標合在一起，會怎樣呢是這樣規(guī)定的如果多個色標具有相同的位置，它們會產生一個無限小的過渡區(qū)域，過渡的起止色分別是第一個和最后一個指定值。 先來說說漸變吧 background: linear-gradient(#fb3 20%, #58a 80%); 效果圖如下所示：也就是說真正的漸變只出現(xiàn)在容器 60%...
閱讀 821·2021-11-25 09:43
閱讀 1690·2021-09-29 09:42
閱讀 1902·2019-08-30 15:55
閱讀 3423·2019-08-30 15:54
閱讀 2629·2019-08-30 13:20
閱讀 3514·2019-08-29 13:25
閱讀 925·2019-08-28 18:03
閱讀 1787·2019-08-26 13:44
