html - 如何为位于元素宽度范围内的框阴影添加边框半径？

Question

我想给一个带有边框半径的按钮添加一个框阴影，但阴影本身应该位于按钮下方并在其宽度范围内。

我能够得到圆形的边框阴影，但是当试图将它定位在元素宽度范围内时，边框半径效果丢失了，而我只得到了没有边框半径的阴影。

.but1 {
  width: 200px;
  height: 100px;
  border: none;
  background-color: yellow;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.8) 0 25px 0px -10px;
  -moz-box-shadow: rgba(0, 0, 0, 0.8) 0 25px 0px -10px;
  box-shadow: rgba(0, 0, 0, 0.8) 0 25px 0px -10px;
}

<button class="but1">
  Click me!
</button>

我到目前为止得到的示例链接如下。

Sample output in jsfiddle

Answer 1

您的 box-shadow 由于负扩散(您的 box-shadow 声明中的最后一个参数)而被裁剪

如果您想要的是与元素宽度完全相同的圆形阴影，则将展开设置为零并从垂直偏移量中取出 10 像素进行补偿就可以了。

.but1 {
  width: 200px;
  height: 100px;
  border: none;
  background-color: yellow;
  border-radius: 10px;
  box-shadow: rgba(0, 0, 0, 0.8) 0 15px 0px 0px;
}

<button class="but1">
  Click me!
</button>

---

如果你想要的是一个保持圆 Angular 边框但比元素宽度短的阴影，你可以在它后面绘制一个较短的伪元素，并将 box-shadow 应用于伪元素

.but1 {
  width: 200px;
  height: 100px;
  border: none;
  background-color: yellow;
  border-radius: 10px;
  position:relative;
}

.but1:before{
  content:"";
  position:absolute; top:10px; bottom:10px; left:10px; right:10px;
  border-radius:10px;
  z-index:-1;
  box-shadow: rgba(0, 0, 0, 0.8) 0 15px 0px 0px;
}

<button class="but1">
  Click me!
</button>