如何为元素的盒阴影添加一个在宽度范围内的边框半径？

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中的样本输出。

- satilog

---

问题不太清楚。您能否请解释一下您确切想要什么？ - Pradeep

请查看http://jsfiddle.net/Zw4QA/1/。 - Athul Nath

你定义了 .but 样式，但是使用了 .but1。 - Alexander

Answer 1

由于 box-shadow 中的负 spread（即 box-shadow 声明中的最后一个参数），导致阴影被裁剪。

如果您想要一个与元素相同宽度的圆角阴影，则将 spread 设置为零，并将垂直偏移减少 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>

- Facundo Corradini

---

谢谢！@Facundo Corradini 第二个建议给了我想要的结果。 - satilog

Answer 2

在 box-shadow 中添加 0px。

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

- user9306633

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

- Ajeesh KH

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>

- Ylama