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