我想为我的 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>但是当我在 Bootstrap 主题中执行相同操作时，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);
}
最佳答案
听起来您的 CSS 不够具体，无法覆盖 Bootstrap CSS。
尝试在图像标签前添加一些父类/元素，看看是否可行。
例如
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 强制启用样式，但这是不好的做法，因此请仅在绝对必要时才使用它。
关于html - 向 Bootstrap 主题 (CSS) 添加边框不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48668184/