css實現連續的圖像邊框

有時我們想把一個圖片應用為邊框，而不是背景，最簡單的辦法是使用兩個HTML元素，一個元素用來把我們的石雕圖片設置為背景，另一個元素用來存放內容，並設置純白背景，然后覆蓋在前者之上，這個方法需要一個額外的HTML元素，這顯然不夠理想，他不僅把結構和表現混合起來，而且在某些特定的場景下，修改HTML是做不到的，那么如果只用一個元素，如何達到這種效果呢？

思路：

在背景圖片上面再疊加一層純白的實色背景，為了讓下層的圖片透過邊框顯示出來，我們需要給兩層背景指定不同的background-clip值。最后一個要點在於，我們只能在多重背景的最底層設置背景色，因此需要一道從白色過渡到白色的css漸變來模擬出純白實色背景效果。

html

<div class="imgborder"></div>
<img src="1.jpg" alt="">

這里放置了一張背景圖片的原圖做對比

css

.imgborder,img{
  float:left;
  width: 250px;
  height: 150px;
  margin: 50px;
}
.imgborder{
  border: 15px solid transparent;
  background: linear-gradient(white,white),url('1.jpg');
  background-size: cover;
  background-clip: padding-box,border-box;
}

效果圖

這已經和我們想要的很相近了，但並不是我們的最終目標，原因是background-origin的默認值是padding-box，因此圖片的顯示尺寸不僅取決於padding box的實際尺寸，而且被放置在了padding box的原點（左上角），我們看到的就是背景圖片以平鋪的方式蔓延到border box區域的效果，為了修正問題，只需要把background-origin設置為border-box就可以了。

css

.imgborder,img{
  float:left;
  width: 250px;
  height: 150px;
  margin: 50px;
}
.imgborder{
  border: 15px solid transparent;
  background: linear-gradient(white,white),url('1.jpg');
  background-size: cover;
  background-clip: padding-box,border-box;
  background-origin: border-box;
}

效果圖

為了簡化代碼量，可以寫成這樣:

.imgborder,img{
  float:left;
  width: 250px;
  height: 150px;
  margin: 50px;
}
.imgborder{
  border: 15px solid transparent;
  background: linear-gradient(white,white) padding-box,url('1.jpg') border-box 0 / cover;
}

 當然，這個技巧也可以用在漸變圖案上，下面這段代碼可以生成一種老式信封樣式的邊框

css

.imgborder{
  width: 250px;
  height: 150px;
  margin: 50px;
  border: 15px solid transparent;
  background: 
              repeating-linear-gradient(-45deg,
                                        red 0,red 12.5%,
                                        transparent 0,transparent 25%,
                                        #58a 0,#58a 37.5%,
                                        transparent 0,transparent 50%)
                                        0 / 30px 30px;
}