仅从左侧删除阴影答案

【问题标题】：Remove drop-shadow from left side only仅从左侧删除阴影
【发布时间】：2016-09-09 18:56:37
【问题描述】：

我有这个按钮，它有一个:after 来创建一个箭头。我给按钮一个盒子阴影，给:after 一个阴影，使:after 看起来像是按钮的一部分。然而，:after 的左边缘有一点阴影，这使它看起来与按钮断开连接。见图片：

有什么办法可以消除左边缘的阴影？

箭头出于某种原因不在其下方的按钮上，但这没关系，只需尝试阻止箭头的阴影沿左边缘向下移动即可。

代码如下：

#go-button {
  position:relative;
  border-radius: 6px;
  height: 64px;
  text-decoration: none;
  width: 80%;
  background-color: #00BFA5;
  padding: 12px;
  border: 0px solid #Fc4747;
  color: white;
  cursor: pointer;
  font-size: 14px;
  font-weight: 200;
  z-index: 100;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); }

.bubble:after {
  content: '';
  position: absolute;
  border-style: solid;
  border-width: 15px 0 15px 24px;
  border-color: transparent #00BFA5;
  display: block;
  width: 0;
  z-index: 1;
  margin-top: -15px;
  right: -24px;
  top: 50%;
  -webkit-filter: drop-shadow(0px 4px 5px rgba(130, 130, 130, 0.7));
  filter: drop-shadow(0px 4px 5px rgba(130, 130, 130, 0.7));
  -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=2, Color='#444')";
  filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=2, Color='#444')"; }

<button id="go-button" type="submit" class="bubble">
  GO
</button>

【问题讨论】：

旁白——按钮内的输入？
Aside Aside -- id为go-div的按钮？
@DaniP 这是一个表单提交
为什么不只是
@DaniP 我认为它需要成为提交表单的输入。我现在已经将其重构为这一点。 <button id="go-button" type="submit" class="bubble"> GO </button> 谢谢

标签： html css dropshadow box-shadow

【解决方案1】：

您实际上确实想使用drop-shadow，因为这是一个“复杂对象”。将其移动到父元素；您会发现该阴影已正确应用于 after 伪元素：

#go-button {
  position:relative;
  border-radius: 6px;
  height: 64px;
  text-decoration: none;
  width: 80%;
  background-color: #00BFA5;
  padding: 12px;
  border: 0px solid #Fc4747;
  color: white;
  cursor: pointer;
  font-size: 14px;
  font-weight: 200;
  z-index: 100;
  -webkit-filter: drop-shadow(0px 4px 5px rgba(130, 130, 130, 0.7));
  filter: drop-shadow(0px 4px 5px rgba(130, 130, 130, 0.7));
  -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=2, Color='#444')";
  filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=2, Color='#444')";
}

.bubble:after {
  content: '';
  position: absolute;
  border-style: solid;
  border-width: 15px 0 15px 24px;
  border-color: transparent #00BFA5;
  display: block;
  width: 0;
  z-index: 1;
  margin-top: -15px;
  right: -24px;
  top: 50%;
}

<button id="go-button" type="submit" class="bubble">
  GO
</button>

【讨论】：

【解决方案2】：

如果您还没有使用 :before 作为元素，您总是可以用另一个伪元素隐藏阴影。另一种选择是抵消阴影，但这确实只适用于小阴影。

第一个例子：

#go-button {
  position:relative;
  border-radius: 6px;
  height: 64px;
  text-decoration: none;
  width: 80%;
  background-color: #00BFA5;
  padding: 12px;
  border: 0px solid #Fc4747;
  color: white;
  cursor: pointer;
  font-size: 14px;
  font-weight: 200;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  z-index: 1;
}

.bubble:after {
  content: '';
  position: absolute;
  border-style: solid;
  border-width: 15px 0 15px 24px;
  border-color: transparent #00BFA5;
  display: block;
  width: 0;
  margin-top: -15px;
  right: -24px;
  top: 50%;
  -webkit-filter: drop-shadow(0px 4px 5px rgba(130, 130, 130, 0.7));
  filter: drop-shadow(0px 4px 5px rgba(130, 130, 130, 0.7));
  -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=2, Color='#444')";
  filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=2, Color='#444')";
}

.bubble:before {
  display: block;
  position: absolute;
  content: '';
  right: 0;
  top: 8px;
  height: 48px;
  width: 8px;
  background: #00BFA5;
  z-index: 2;
}

<button id="go-button" type="submit" class="bubble">
  GO
</button>

【讨论】：

【解决方案3】：

box-shadow 属性可能是您想在这里使用的。阴影用于更复杂的对象或 SVG。

您只需要在 :after 元素周围应用更好的 box-shadow。

.bubble:after {
   box-sizing: border-box;    
   border: 1em solid #00BFA5;
   border-color: transparent transparent #00BFA5 #00BFA5;
   transform-origin: 0 0;
   transform: rotate(-135deg);
   display: block;
   width: 0;
   z-index: 1;
   margin-top: -15px;
   right: -250px;
   top: 50%;
   box-shadow: -3px 3px 3px 0 rgba(0, 0, 0, 0.4);
}

由于您没有提供有效的小提琴，我将把旋转等的调整留给您，但总体思路是，您需要在设置适当的边框和边框后设置 box-shadow 的样式颜色。

JsFiddle

【讨论】：