如何为元素宽度范围内的框阴影添加边框半径？答案

【问题标题】：How to add a border radius to a box shadow that lies within the width range of the element?如何为元素宽度范围内的框阴影添加边框半径？
【发布时间】：2018-03-08 14:56:30
【问题描述】：

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

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

.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

【问题讨论】：

问题不清楚。你能解释一下你到底想要什么吗？
检查jsfiddle.net/Zw4QA/1
您定义.but 样式但使用.but1。

标签： html css

【解决方案1】：

您的 box-shadow 正在被裁剪，因为负散布（您的 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 第二个建议让我得到了我想要的。

【解决方案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>

【讨论】：

【解决方案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;

}

【讨论】：

【解决方案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>

【讨论】：