Why does this box-shadow create a border effect?-CodePudding

Can someone please explain why this box-shadow is adding such a border/underline underneath the heading element?

Is it a matter of enabling height mutability with inline-block, altering height to 50px, then only spanning the box-shadow with the coded parameters? Seems like this is what's happening, but I'm still having difficulty wrapping my head around the concept.

Thanks for your time and help..

.heading {
  box-shadow: 0 26px 0 -23px #000;
  display: inline-block;
  font-size: 30px;
  height: 50px;
  left: 50%;
  margin-left: -60px;
  position: relative;
  text-transform: capitalize;
}

<h1 class="heading">Heading</h1>

CodePudding user response：

The fourth property of box-shadow is spread radius, which effectively sizes the shadow compared to the element itself. By setting a negative value, it is reduced by 23px from each side.

The second property is the y-axis offset, so the shadow is lowered by that amount.

CodePudding user response：

Note the effect of animating the 4th box-shadow parameter:

@keyframes k {
  0% { box-shadow: 0 26px 0 23px #000; }
  100% { box-shadow: 0 26px 0 -23px #000; }
}

.heading {
  display: inline-block;
  font-size: 30px;
  height: 50px;
  left: 50%;
  margin-left: -60px;
  position: relative;
  text-transform: capitalize;
  
  animation-name: k;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-direction: alternate;
}

<h1 class="heading">Heading</h1>

It becomes clear that the box-shadow resembles a line partially because it is being occluded by the heading itself.

In my opinion a "default" box-shadow is something like a black, 3px-wide line around the content:

.heading {
  display: inline-block;
  font-size: 30px;
  height: 50px;
  left: 50%;
  margin-left: -60px;
  position: relative;
  text-transform: capitalize;
  
  box-shadow: 0 0 0 3px #000;
}

<h1 class="heading">Heading</h1>

We can animate from this "default" box-shadow to yours, to see how your parameters have modified the appearance:

@keyframes k {
  0% { box-shadow: 0 0 0 3px #000; }
  100% { box-shadow: 0 26px 0 -23px #000; }
}

.heading {
  display: inline-block;
  font-size: 30px;
  height: 50px;
  left: 50%;
  margin-left: -60px;
  position: relative;
  text-transform: capitalize;
  
  animation-name: k;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in;
  animation-direction: normal;
}

<h1 class="heading">Heading</h1>

CodePudding user response：

It's because box-shadow: 0 26px 0 #000 makes a same size of the heading text.

And the last number -23px reduces the shadow from the top, left, right, and bottom 23px.

You can check how it works by editing the 4th number. If you set it as a positive number, the box-shadow increases.