Question

我正在尝试删除图像上的阴影。我尝试了这段代码，但它不起作用：

.img none { border:none!important; }

http://www.101calendartemplates.com/watercolor-calendar/

Answer 1

您可以使用以下方法删除阴影：

img  {
    box-shadow: none !important;
}

你完全控制CSS吗？因为有一个类alignnone应用这些阴影。如果您控制CSS，只需将该类更改为不应用box-shadow。如果没有，你试图为它插入一些CSS，你可以使用上面的。

以上内容适用于所有img元素。如果您只想将它应用于具有首先添加阴影的alignnone类的图像，您可以像这样覆盖：

.alignnone  {
    box-shadow: none !important;
}

仅供参考，这是添加阴影的类看起来像：

.alignnone {
    border: #b9b9b9 solid 1px;
    -webkit-box-shadow: 3px 3px 5px 6px #ccc;
    /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
    -moz-box-shadow: 3px 3px 5px 6px #ccc;
    /* Firefox 3.5 - 3.6 */
    box-shadow: 3px 3px 5px 6px #ccc;
    /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
}

另一方面注意到您尝试过的CSS并不正确。

.img none { border:none!important; }

这表示有一个类img的元素具有none类型的后代元素。 none不是有效的HTML代码。

Answer 2

只需将box-shadow属性显式设置为不显示：

/* The important tag is optional but will supercede any other styles that might add it */
img {
    box-shadow: none!important;
    /* Browser specific implementations */
    -moz-box-shadow: none!important;
    -webkit-box-shadow: none!important;
}

Answer 3

首先，我相信你可能会对声明感到困惑。

我认为它应该是img .none { border:none!important; }

在chrome或firefox中的图像上使用Web检查器并调查属性。它可能启用了轮廓或框阴影。

下面应该涵盖所有基础知识，但重要的是只应用所需样式所需的规则。

img .none { 
    border: none !important; 
    outline: none !important; 
    box-shadow: none !important;
}

如何用css删除图像上的阴影

3 个答案: