0

我用这个 CSS 代码展示了box-shadow 。

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

在此处输入图像描述

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

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

但是，我仍然有 `class="noborder"> 代码的影子，可能是什么问题？

4

3 回答 3

2

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

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

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

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

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

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

​</p>

这是一个 jsfiddle 演示，向您展示它是如何工作的。

于 2012-10-27T17:24:50.673 回答
1

尝试用 替换#noborder，.noborder你希望它是一个类，而不是一个 ID。

此外，box-shadow: none它是去除盒子阴影的更简洁的替代方法

于 2012-10-27T17:27:24.573 回答
0

用于box-shadow: none完全去除阴影。

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

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

演示

于 2012-10-27T17:25:04.117 回答