CSS“边界剪辑”中途通过边界

Question

我关注this CSS turorial。在this page上，它展示了如何使用图像边框。跟随他们的教程的结果是这个结果：

本教程使用background-clip: padding-box;确保背景没有进入边框图像。我想知道我是否能以某种方式在背景中夹到背景，给出这个结果（用油漆编辑）：

注意我不希望通过完全删除background-clip声明来实现此结果：

编辑：

border-image-outset似乎很有希望，只要它可以设置为负数。

编辑2：

答案应适用于未知维度的情况 - 例如，如果width属性为％

Answer 1

如果已知边框大小，那么您最终可以使用background-size，calc()和渐变来绘制te bg-color：

div {
  width: 300px;
  padding: 20px;
  margin: 10px auto;
  line-height: 3;
  /*background-color: #f66;*/
  /*background-clip: padding-box;*/
  /* use instead : */
  background:linear-gradient(#f66,#f66) no-repeat center center;
  background-size: calc(100% + 20px)  calc(100% + 20px);
  text-align: center;
  /* border-related properties */
  border: 20px solid black;  
  border-image-source: url(https://mdn.mozillademos.org/files/13060/border-image.png);
  border-image-slice: 40;
  border-image-repeat: round;
  
}

<div>
  <p>Border image</p>
</div>

20px的边框在每个轴上共40px宽。 background-size通过calc()增加20px将只覆盖边界区域的一半。