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

Bootstrap: how to remove the box shadow from the modal?

提问by laukok

how can I remove the box shadow from bootstrap's modal? I tried with the css below but no luck. Any ideas?

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

css,

css,

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

bootstrap,

引导程序，

<!-- 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>

回答by rockStar

I did try this and seems to work

我确实尝试过这个并且似乎有效

.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);
}

a bootply sample

一个引导样本

回答by HarleyCreative

Have no fear, there is a very simple solution to this.

不要害怕，有一个非常简单的解决方案。

You simply need to be more specific in your CSS selector and include div. The reason for this is that the style you are trying to override in the Bootstrap CSS was written div.modal-dialog {...}.

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

In CSS, element.classis more specific than .class, and the more specific tag will always take precedence.

在 CSS 中，element.class比 更具体.class，并且更具体的标签将始终优先。

So your solution is simply:

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

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

See the working example on bootply.

请参阅 bootply 上的工作示例。