Twitter bootstrap 将dropshadow添加到twitter boostrap工具提示的箭头

我们正在使用twitter引导并添加定制的工具提示。我们想将dropshadows添加到工具提示中，我们已经成功地将它们添加到主工具提示框中，但没有添加到工具提示下的向下箭头中。以下是使用此代码的当前示例：

    .tooltip-inner, .tooltip.top .tooltip-arrow {
    background-color: rgb(20,20,20,); /* Needed for IEs */
    -moz-box-shadow: 0px 1px 5px 1px rgba(0,0,0,0.4);
    -webkit-box-shadow: 0px 1px 5px 1px rgba(0,0,0,0.4);
    box-shadow: 0px 1px 5px 1px rgba(0,0,0,0.4);
    zoom: 1;
    }

.tooltip Internal获取主框，但.tooltip.top.tooltip arrow会在整个箭头框周围放置阴影

---

关于如何让dropshadow与箭头的对角边对齐，而不是与它所在的div框对齐，有什么建议吗？

在分析工具提示箭头的twitter boostrap css后，很明显，他们正在使用带有透明左右边框的border top来获得箭头形状。因为它们是边界，所以不能被阴影包围。太悲哀了。

在分析了工具提示箭头的twitter boostrap css后，很明显他们使用了带有透明左右边框的border top来获得箭头形状。因为它们是边界，所以不能被阴影包围。真可悲。

查看如何为三角形添加阴影。它可能会帮助您实现这一点。

查看如何为三角形添加阴影。它可能会帮助您实现这一点。

我可以通过在引导工具提示类中创建一个名为“带阴影的三角形”的div来实现这一点。我使用底部和左侧css属性将自定义形状覆盖在现有引导工具提示箭头的顶部

/* tool tip box-shadow styles */

<style>
  .tooltip-inner {
        background:#fff;
        color: #444;
        -moz-box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.4);
        -webkit-box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.4);
        box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.4);
  }
 .triangle-with-shadow:after {
         background: #fff;
         content: "";
         position: absolute;
         width: 0;
         height: 0;
         margin-left: -0.4em;
         bottom: -1.48em;
         left: 44%;
         box-sizing: border-box;
         border: 1em solid #ffffff;
         transform-origin: 0 0;
         transform: rotate(-45deg);
         box-shadow: -3px 3px 3px 0px rgba(0, 0, 0, 0.4);
   }
</style>

---

这适用于白色背景。这并不完美，但如果你想在工具提示的箭头部分显示阴影，这是使用引导的最佳解决方案。否则，从头开始构建工具提示

我可以通过在引导工具提示类中创建一个名为triangle with shadow的div来实现这一点。我使用底部和左侧css属性将自定义形状覆盖在现有引导工具提示箭头的顶部

/* tool tip box-shadow styles */

<style>
  .tooltip-inner {
        background:#fff;
        color: #444;
        -moz-box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.4);
        -webkit-box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.4);
        box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.4);
  }
 .triangle-with-shadow:after {
         background: #fff;
         content: "";
         position: absolute;
         width: 0;
         height: 0;
         margin-left: -0.4em;
         bottom: -1.48em;
         left: 44%;
         box-sizing: border-box;
         border: 1em solid #ffffff;
         transform-origin: 0 0;
         transform: rotate(-45deg);
         box-shadow: -3px 3px 3px 0px rgba(0, 0, 0, 0.4);
   }
</style>

---

这适用于白色背景。这并不完美，但如果你想在工具提示的箭头部分显示阴影，这是使用引导的最佳解决方案。否则，从头开始构建工具提示

哦，这是一个很好的步行通过几个三角形w/阴影技术。其中一个可以用来代替引导工具提示中的箭头。我得做些实验。谢谢。哦，这是一个很好的带阴影的三角形技巧。其中一个可以用来代替引导工具提示中的箭头。我得做些实验。谢谢