默认情况下,Bootstrap 有弹出框阴影。但我需要带有弹出箭头的相同阴影。如何只为箭头边框获取阴影。
这是 My-fiddle
谁能帮忙解决这个问题。
$(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>
最佳答案
要制作三 Angular 形框阴影,您只需将正方形旋转 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;
}
fiddle :https://jsfiddle.net/ke35nzag/
关于javascript - 弹出框阴影也需要用于箭头,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37681312/