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

 

转载自： http://www.javashuo.com/article/p-remqqdnx-en.html