连续的图像边框

前几节我们有提到，背景图案默认是一直延续到边框的外沿的，如果把边框设置为透明色，背景图就会露出来。

但是有个“小问题”，背景图片不是从元素的左上角开始放置的，而是被放在了内边距的左上角，即background-origin: padding-box。

div {
  border: 16px solid transparent;
  background: url(https://i.imgur.com/XmCJBvU.jpeg);
  width: 200px;
  height: 200px;
  padding: 16px;
  overflow: hidden;
}

上面和左面的边框区域显示的背景有点怪异，其实是原图片以平铺的方式蔓延到的。为了让背景图案从元素的左上角开始放置，要设置background-origin: border-box。

div {
  border: 16px solid transparent;
  background: url(https://i.imgur.com/XmCJBvU.jpeg);
  background-origin: border-box;
  width: 200px;
  height: 200px;
  padding: 16px;
  overflow: hidden;
}

在此基础上面，我们在padding-box区域画出白色的背景，把背景图片盖住，这样就做出了连续的、以图像为边框的效果。

div {
  border: 16px solid transparent;
  background: linear-gradient(white, white) padding-box, url(https://i.imgur.com/XmCJBvU.jpeg)
      border-box 0 / cover;
  width: 300px;
  height: 300px;
  padding: 16px;
  overflow: hidden;
}

hello