Can box-shadow CSS property have padding?-CodePudding

Is it possible to achieve this red countour at a distance from the shape using box-shadow property?

CodePudding user response：

Yes you can add two shadows, and make the inner one have the same color as the background. I don't like this approach though and would rather use border and outline for that.

div {
  margin: 50px;
  width: 300px;
  height: 100px;
  background-color: aquamarine;
  box-shadow: 0px 0px 0px 8px #FFFFFF, 0px 0px 0px 17px #CCC7CA;
}

<div></div>

Without box-shadow:

#background {
  background-color: darkblue;
  display: block;
  height: 100vh;
  padding: 50px;
}

#box {
  width: 300px;
  height: 100px;
  background: aquamarine padding-box;
  border: 8px transparent solid;
  outline: 9px #CCC7CA solid;
}

<div id="background">
  <div id="box"></div>
</div>