为什么这个框影会产生边框效果？

Question

有人能解释一下为什么这个框阴影在标题元素下面添加这样的边框/下划线吗？

这是一个允许高度变化与内联块，改变高度到50 box，然后只跨越框阴影与编码的参数？似乎这就是正在发生的事情，但我仍然很难把我的头围绕在这个概念上。

谢谢你的时间和帮助。

​

.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>

​

Answer 1

盒影的第四个性质是扩展半径，与元素本身相比，扩展半径有效地缩小了阴影的大小。通过设置一个负值，它从两边减少了23 is。

第二个属性是y轴偏移量，因此阴影降低了这个值。

Answer 2

这是因为box-shadow: 0 26px 0 #000的标题文本大小相同。

最后一个数字-23px减少了从上、左、右和底部的23 the 的阴影。

您可以通过编辑第四个数字来检查它是如何工作的。如果将其设置为正数，则box-shadow会增加。

Answer 3

请注意第四个box-shadow参数的动画效果：

​

@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>

​

很明显，框影部分类似于一条线，因为它被标题本身挡住了。

在我看来，“默认”框阴影就像是围绕内容的黑色3px行：

​

.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>

​

我们可以从这个“默认”框阴影动画到您的，看看您的参数是如何修改外观的：

​

@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>

​