html - 有条件地显示盒子阴影

Question

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

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

我想有条件地隐藏边界，我尝试在 img 标签中添加“noboarder”类，

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

但是，我仍然有`class="noborder">代码的影子，可能是哪里出了问题？

Answer 1

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

此外，当覆盖阴影使其不出现时，您必须将颜色设置为透明。 px 测量值用于阴影偏移、大小和扩散(如果您使用它)，因此这些根本无关紧要。或者使用 none 代替测量值和颜色。

我更改了选择器和类以更好地反射(reflect) CSS 的功能，因为阴影不同于边框。

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

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

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

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