Question

我想在img添加常规阴影，当我使用以下代码时，一切正常：

img.img-border {
    -webkit-box-shadow: 10px 10px 41px -12px rgba(123,129,140,1);
    -moz-box-shadow: 10px 10px 41px -12px rgba(123,129,140,1);
    box-shadow: 10px 10px 41px -12px rgba(123,129,140,1); }

<html>
    <head>
        <link href="style.css" rel="stylesheet" type="text/css" media="all">
    </head>
    <body>
        <img class="img-border" src="https://placeholdit.co/i/200x150">
    </body>
</html>

但是当我在引导主题中做同样的事情时，img没有任何反应。有人有想法吗？这是bootstrap部分代码：

<head>
    <link href="css/bootstrap-theme.css" rel="stylesheet" type="text/css" media="all" />
    <link href="css/custom.css" rel="stylesheet" type="text/css" media="all" />
</head>

<body>
    <section class="pb16">
        <div class="container">
            <div class="row v-align-children">
                 <div class="col-md-4 col-sm-5 mb-xs-24">
                     <h3 class="large mb40 mb-xs-16">TITLE BLABLA</h3>

                     <p class="lead" style="text-align: justify">Text Content blablabla</p>
                    <a class="btn btn-filled btn-lg mb32 mt-xs-40" href="#">Click Here</a>
                    </div>
                    <div class="col-md-7 col-md-offset-1 col-sm-6 col-sm-offset-1 text-center" >
            <img class="img-shadow" alt="Screenshot" src="img/picture.png">
                </div>
            </div>
            <!--end of row-->
        </div>
        <!--end of container-->
    </section>

这是在custom.css：

  html.body.img.img-shadow {
    -webkit-box-shadow: 10px 10px 41px -12px rgba(123,129,140,1);
    -moz-box-shadow: 10px 10px 41px -12px rgba(123,129,140,1);
    box-shadow: 10px 10px 41px -12px rgba(123,129,140,1);
  }

Answer 1

为了覆盖Bootstrap css，您的自定义css必须具有相同或更高的特异性，并且必须在加载Bootstrap css后加载自定义css。

在您更新的代码中，您发布了您正在将其用于css规则：

html.body.img.img-shadow

将其更改为：.img-shadow

Answer 2

在引导版本之后加载CSS样式并创建自定义类并应用它来克服特异性问题。

read more

＆＃13;
＆＃13;
.custom { -webkit-box-shadow: 10px 10px 41px -12px rgba(123, 129, 140, 1); -moz-box-shadow: 10px 10px 41px -12px rgba(123, 129, 140, 1); box-shadow: 10px 10px 41px -12px rgba(123, 129, 140, 1); }
＆＃13;
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link href="style.css" rel="stylesheet" type="text/css" media="all"> <div class="well"> the well is proof that the bootstrap is loading <img class="img-border custom" src="https://placeholdit.co/i/200x150"> </div>
＆＃13;
＆＃13;
＆＃13;

Answer 3

听起来你的CSS并不足以覆盖Bootstrap CSS。

尝试在图片标记前添加一些父类/元素，看看是否有效。

e.g。

html body img.img-border {
    -webkit-box-shadow: 10px 10px 41px -12px rgba(123,129,140,1);
    -moz-box-shadow: 10px 10px 41px -12px rgba(123,129,140,1);
     box-shadow: 10px 10px 41px -12px rgba(123,129,140,1); 
}

你也可以在最后强制使用！important，但这是不好的做法，所以只有在绝对必要时才使用它。

添加边框到引导主题（CSS）不起作用

3 个答案: