Html 在一些照片中添加博客图片上的阴影

默认情况下，Blogger的简单模板在图像周围带有一个框/阴影。您可以在任何未编辑的博客中的图像周围看到它们，例如：

我找到了一个完全删除它的代码：

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
  padding: none !important;
  border: none !important;
  background: none !important;
  -moz-box-shadow: 0px 0px 0px transparent !important;
  -webkit-box-shadow: 0px 0px 0px transparent !important;
  box-shadow: 0px 0px 0px transparent !important;
} 

我还发现了一个代码，只在一些图像中删除它。在带有图像的每篇文章的html上添加类noborder，这在css中：

img.noborder {
    border: 0px;
    -moz-box-shadow: 0px 0px 0px rgba(0, 0, 0, .0);
    -webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, .0);
    box-shadow: 0px 0px 0px rgba(0, 0, 0, .0);
    border-radius: 0px 0px 0px 0px;
    background: none;
}

我想做的正好相反：找到一个默认情况下不显示阴影的代码，但是当我尝试向图像添加一个类（比如说：border）时它会显示阴影

我该怎么做呢

---

谢谢

你拿到了！您已经有了删除阴影的代码，因此稍微考虑一下，您可以做出相反的选择（我在CSS中使用

：not（）

伪选择器）：

因此，如果您需要在某些img中添加一个方框阴影，您可以添加

边框

类：

<img src="img.png" class="border">

它起作用了

有关

：not（）

选择器的更多信息，请参见：

你应该喜欢这个-

.post-body img.noborder , .Profile img.noborder , .Image img.noborder , .BlogList .item-thumbnail img.noborder {
border: 0px;
-moz-box-shadow: 0px 0px 0px rgba(0, 0, 0, .0);
-webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, .0);
box-shadow: 0px 0px 0px rgba(0, 0, 0, .0);
border-radius: 0px 0px 0px 0px;
background: none;
}

或者您可以使用

！重要信息

-

img.noborder {
    -moz-box-shadow: 0px 0px 0px rgba(0, 0, 0, .0) !important;
    -webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, .0) !important;
    box-shadow: 0px 0px 0px rgba(0, 0, 0, .0) !important;
}

---

也许您只需要创建另一个名为

.border

的类，该类包含：

.border {    
    border: 1px solid #eeeeee;
    -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
    -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
    box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
}

然后将该类添加到要使用阴影的图像中。 在这种情况下，您应该忽略以下内容：

img.noborder {
    border: 0px;
    -moz-box-shadow: 0px 0px 0px rgba(0, 0, 0, .0);
    -webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, .0);
    box-shadow: 0px 0px 0px rgba(0, 0, 0, .0);
    border-radius: 0px 0px 0px 0px;
    background: none;
}

然后离开：

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
  padding: none !important;
  border: none !important;
  background: none !important;
  -moz-box-shadow: 0px 0px 0px transparent !important;
  -webkit-box-shadow: 0px 0px 0px transparent !important;
  box-shadow: 0px 0px 0px transparent !important;
} 

---

在这里，除了带有

.border

的图像外，图像不会有阴影。要删除

框阴影

，只需使用

框阴影：无，而不是第二个代码上的内容。另外，我建议不要使用
！重要信息
如果不必。您有权访问包含阴影的css文件吗？OP需要相反的方法。这个答案与OP asksIt的工作原理相同，但是您需要将border类添加到需要显示边框的图像中。我们能看看你的密码吗？有什么问题？“它不起作用”不要帮我知道发生了什么。郁闷，对不起，它起作用了！非常感谢马科斯！我刚开始写代码，我不知道：not（）的事，我要读一读。再次感谢！：）是的，祝贺你。当您需要解决CSS或javascript问题时，请与我联系；）
.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
  padding: none !important;
  border: none !important;
  background: none !important;
  -moz-box-shadow: 0px 0px 0px transparent !important;
  -webkit-box-shadow: 0px 0px 0px transparent !important;
  box-shadow: 0px 0px 0px transparent !important;
}