Question

默认情况下，Bootstrap有弹出框阴影。但我需要与popover箭头相同的阴影。如何只为箭头边框获取该阴影。

任何人都可以为此提供帮助。

$(function () {
    $('#example').popover();
});

a{
  margin-top:100px;
}
.popover-content{
  min-height:200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

<link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>


<p>Click on button to see Popover</p>

<a href="#" id="example" class="btn btn-primary" rel="popover"
   data-content="This is the body of Popover"
   data-original-title="Creativity Tuts">pop
</a>

Answer 1

要制作三角形框阴影，您可以将方形旋转45度并应用阴影：

.popover.right .arrow:before {
  content: "";
  display:block;
  position:absolute;
  z-index:-1;
  height:14.14px;
  width:14.14px;
  bottom:-8px;
  left:4px;
  background:transparent;
  transform: rotate(45deg);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

我还必须将背景添加到内容元素，因为阴影位于其上方。如果你不能只为内容添加任何背景（或背景颜色），你也可以使用overflow：hidden。

.popover-content{
  background-color:#FFF;
}

小提琴：https://jsfiddle.net/ke35nzag/

Popover Box阴影也需要用于箭头

1 个答案: