html - 条件付きでボックス シャドウを表示する

Question

この CSS コードでbox-shadowを表示します。

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

ボーダーを条件付きで非表示にしたいので、imgタグに「noboarder」クラスを追加してみましたが、

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

しかし、`class="noborder">コードの影がまだ残っています。何が問題なのですか?

Answer 1

わかりました、ここでいくつか問題があります。まず、HTML に class 属性がありますが、ID セレクターで img を選択しようとしています#。クラスセレクターを使用する必要があります.

また、影が出ないように上書きする場合は、色を透明にする必要があります。ピクセルの測定値は、シャドウ オフセット、サイズ、およびスプレッド (使用する場合) のためのものであるため、これらはまったく問題になりません。または、測定値と色の代わりに何も使用しません。

シャドウは境界線とは異なるため、セレクターとクラスを変更して CSS の動作をより適切に反映させました。

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

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

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

</p>

そして、これがどのように機能するかを示すjsfiddleデモです。

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;}

デモ