【问题标题】:I am trying to give "box-shadow" to my image but i doesn't works我正在尝试为我的图像添加“box-shadow”,但我不起作用
【发布时间】:2014-07-13 20:38:09
【问题描述】:

你能告诉我我的代码有什么问题吗?为什么图像上没有阴影?
这是我的代码:
HTML

<div class="wrapper">
    <img src="http://i.imgur.com/aVt9qPi.png"/>
</div> 

CSS

div.wrapper img{
-moz-box-shadow:inset 1px 2px 18px #000000;
-webkit-box-shadow:inset 1px 2px 18px #000000;
box-shadow:inset 1px 2px 18px #000000;
}

你可以找到工作演示here

【问题讨论】:

标签: html image css shadow


【解决方案1】:

您不能直接在图像上应用阴影inset 效果。最好把它应用在 div 上。

检查DEMO

div.wrapper{
-moz-box-shadow:inset 1px 2px 18px #000000;
-webkit-box-shadow:inset 1px 2px 18px #000000;
box-shadow:inset 1px 2px 18px #000000;
}

div.wrapper img{
  position:relative;
  z-index:-1;
}

【讨论】:

  • @web-tiki 现在可以工作了吗?没有其他理由投反对票
  • 谢谢,我用过 :D
【解决方案2】:

插入阴影不适用于图像标签,但您可以将 img 包裹在父元素中以达到相同的效果。

See this solution for an example.

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-05-18
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多