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

Posted 2023-03-05

【中文标题】Bootstrap：如何从模态中删除框阴影？

【英文标题】：Bootstrap: how to remove the box shadow from the modal?

【发布时间】：2014-03-07 11:58:51

【问题描述】：

如何从引导程序的模态中删除框阴影？我尝试了下面的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>

【问题讨论】：

您的语法是正确的，可能是 css 规则不够强大 - 您是否尝试添加 !important ？

是的，我做到了。但一点运气都没有。

【参考方案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

【讨论】：

什么是-0-box-shadow:??

哦，歌剧应该是-o-。

有没有办法从所有引导元素中移除盒子阴影？

【参考方案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.

【讨论】：

并添加边框：0px;当您只使用 .modal-content 并希望它完全融入背景/背景（具有相同的颜色）时。这非常适合创建全屏导航。

【参考方案3】：

下面的 css 代码为我工作。

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