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

Question

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

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

注意我不想要通过完全删除背景剪辑声明来实现此结果：

编辑：

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

编辑2：

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

Answer 1

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

每个轴上20px的边框一起宽40px。 background-size calc()通过spark.master yarn spark.driver.memory 3g spark.executor.cores 1 spark.executor.memory 3g spark.executor.instances 5 增加20px将仅覆盖边界区域的一半。