Bootstrap：如何从模态中删除框阴影？

Question

如何从引导程序的模态中删除框阴影？我尝试了下面的css，但没有运气。有什么想法吗？

CSS，

.modal-dialog {
        box-shadow: none;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        -moz-transition: none;
        -webkit-transition: none;
    }

引导，

<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="false">
  <div class="modal-dialog custom-class">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Answer 1

我确实试过这个，似乎可以工作

.modal-content{
    -webkit-box-shadow: 0 5px 15px rgba(0,0,0,0);
    -moz-box-shadow: 0 5px 15px rgba(0,0,0,0);
    -o-box-shadow: 0 5px 15px rgba(0,0,0,0);
    box-shadow: 0 5px 15px rgba(0,0,0,0);
}

bootply sample

Answer 2

别担心，有一个非常简单的解决方案。

您只需要在您的 CSS 选择器中更加具体并包含 div。原因是您尝试在 Bootstrap CSS 中覆盖的样式是 div.modal-dialog {...}。

在 CSS 中，element.class 比 .class 更具体，更具体的标签总是优先。

所以你的解决方案很简单：

div.modal-content{
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -o-box-shadow: none;
    box-shadow: none;
}

See the working example on bootply.

Answer 3

下面的 css 代码为我工作。

.modal-backdrop.fade.show{
   display:none;
 }