Question

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

我到目前为止的例子如下所示。

Sample output in 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>

如果您想要的是一个保持圆角边框但比元素宽度短的阴影，您可以在其后面绘制一个较短的伪元素，并将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>

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

像这样更新你的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;

}

Answer 4

我使用: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>

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

4 个答案: