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

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>

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

jsfiddle 中的示例输出

Answer 1

由于负点差(箱形阴影声明中的最后一个参数(而裁剪了框阴影

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

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

---

如果你想要的是保持圆角边框但短于元素宽度的阴影，则可以绘制一个位于其后面的较短伪元素，并将框阴影应用于伪元素

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

Answer 2

将0px添加到box-shadow

.but1 {
  width: 100px;
  height: 50px;
  border: none;
  background-color: yellow;
  border-radius: 100px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 9px;
}

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

Answer 3

我用:after来实现这一点，只是一个想法，你可以随心所欲地玩css。

法典：

.but1{
    width:200px;
    height:100px;
    border:none;
    background-color:yellow;
    
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    position: relative;
   /* -webkit-box-shadow: rgba(0,0,0,0.8)  5px 20px 0px;
    -moz-box-shadow: rgba(0,0,0,0.8)  5px 20px 0px;
    box-shadow: rgba(0,0,0,0.8) 0px 3px 9px;*/
}
.but1:after {
    content: "";
    position: absolute;
    left: 16px;
    width: 84%;
    bottom: 37px;
    z-index: -1;
    border-radius:10px;
    transform: scale(.9); 
    box-shadow: -1px 20px 14px 20px rgba(0,0,0,0.8);
}

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

Answer 4

像这样更新你的css。

.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) 0px 7px 8px 1px;
    -moz-box-shadow: rgba(0,0,0,0.8) 0px 7px 8px 1px;
    box-shadow: rgba(0,0,0,0.8) 0px 7px 8px 1px;
    float:left;
}