有条件地显示盒子阴影

Question

我使用此CSS代码显示box-shadow。

img {
    box-shadow: 2px 2px 1px #888;
}

我想有条件地隐藏寄宿生，我试图添加＆＃34; noboarder＆＃34; img标签中的类，

<img ... class="noborder">
#noborder
{
    box-shadow: 0px 0px 0px #888;
}

但是，我仍然有'class =＆＃34; noborder＆＃34;＆gt;代码的影子，可能出错了？

Answer 1

好的，这里有一些问题。首先，您的HTML中有一个class属性，但您尝试使用ID选择器#选择img。您必须使用类选择器.

此外，当覆盖阴影使其不显示时，您必须将颜色设置为透明。 px测量用于阴影偏移，大小和扩展（如果使用它），因此这些根本无关紧要。或者不使用任何代替测量和颜色。

我更改了选择器和类以更好地反映CSS的作用，因为阴影与边框不同。

.shadow
{
    box-shadow: 2px 2px 2px #888;
}

.noShadow
{
    2px 2px 2px transparent
}​

.noShadow.none
{
     box-shadow: none;
}

并here's a jsfiddle demo向您展示它是如何运作的。

Answer 2

尝试将#noborder替换为.noborder，您希望它是一个类，而不是ID。

此外，box-shadow: none是删除框阴影的更简洁的选择

Answer 3

使用box-shadow: none完全删除阴影。

<div>test</div>
<div class="noborder">test</div>​

---

div {box-shadow: 2px 2px 1px #888;}
.noborder{box-shadow: none;}

Demo