三个侧面的阴影仅具有多个插入框阴影和Alpha透明度

问题描述

目标是使元素的内嵌边框为 box-shadow ，其中底边不受任何阴影的影响.我试着玩着阴影的值，但是没有运气.

The goal is to have an element with a sublte inset box-shadow where the bottom edge is not affected by any shadow. I tried playing around with the values of the shadow but no luck.

更糟糕的是，颜色具有透明度，这意味着我不能简单地将三角形与元素重叠以隐藏阴影线.有什么想法吗?

To matters worse, the colors have transparency which means that I cannot simply overlap the triangle with the element as to hide the line of the shadow. Any ideas?

.nav {
  background-color:rgba(0, 0, 0,.5);
}
.item {
  display:inline-block; margin-left:100px;
  position:relative; border-left: rgba(0,0,0,.8); border-right: rgba(0,0,0,.8);
  padding:5px 30px; background-color:rgba(10,36,53,.1);
  box-shadow:	inset 0 10px 20px 2px rgba(10,36,53,.1),
    inset 0px 0px 3px rgba(0,0,0,.1),
    inset  0px 0px 3px rgba(0,0,0,.1);
}

.triangle {
  border-top: 15px solid rgba(2,7,10,.55);
  border-left: 15px solid transparent; border-right: 15px solid transparent;
  position: absolute; bottom: -15px;
  margin-left: -15px; left:50%;
}

<div class="nav">
  <div class="item">
    Hello World
    <div class="triangle"></div>
  </div>
</div>

推荐答案

您可以在阴影上使用垂直偏移...这样的方法可能有效:

You can use vertical offset on the shadow ... something like this could work:

inset 0px 3px 3px rgba(0,0,0,.1);

演示

，如果偏移使阴影伸出得太远，您还可以在扩展半径上使用负值...

inset 0px 3px 3px -1px rgba(0,0,0,.1);

这篇关于三个侧面的阴影仅具有多个插入框阴影和Alpha透明度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！