css - 是否可以在 block 元素的边距中注入(inject)背景属性？

Question

演示:https://codepen.io/joondoe/pen/BaBJjqe

我已经看到 css 盒模型包括边距作为盒模型的最外层组件。我想知道是否可以在框元素的边距中添加背景颜色。

div{
  display:flex;
  text-align:center;
  justify-content:center;
  align-items:center; 
  
  background:orange;
  height: 30px;
  border: 15px solid green;
  
  margin:50px;
  
  /* to illustrate what I would accomplish */
  margin-background:pink;
}

<div> I am a div </div>

Answer 1

我猜你只是在寻找 box-shadow:

div{
  display:flex;
  text-align:center;
  justify-content:center;
  align-items:center; 
  
  background:orange;
  height: 30px;
  border: 15px solid green;
  
  margin:50px;
  
  box-shadow:0 0 0 50px pink;
}

<div> I am a div </div>