阴影大于背景图像

Question

当我尝试向缩略图边框图像添加阴影时，遇到此问题。有没有办法解决？ ：■

这是代码的一部分：

#content .item{
 width: 285px;
 height: 240px;
 float: left;
 margin: 0 10px 10px 0;
 padding: 15px 0 0 15px;
 background: url(../images/thumbnail.png) no-repeat;
 background-size: 285px 240px;
 box-shadow: -5px -5px 10px #CCC;
}

http://jsfiddle.net/ju3hxjuu/4

Answer 1

您有什么问题请明确指定。

如果您正在谈论图像周围的白色边框+阴影。 然后请注意，您刚刚使用的添加制作白色边框，因为您的div大于其中的图像。如果您希望阴影仅出现在图像周围，则必须删除填充。像这样：

#content .item{
 width: 285px;
 height: 240px;
 float: left;
 margin: 0 10px 10px 0;
 background: url(../images/thumbnail.png) no-repeat;
 background-size: 285px 240px;
 box-shadow: -5px -5px 10px #CCC;
}

Answer 2

jsfiddle：http://jsfiddle.net/harshdand/ju3hxjuu/5/

你实际上并不需要图像来创建缩略图背景

HTML

<div class="item">    
        <img src="http://i.imgur.com/t2cfwup.png" alt=""/>
</div>

的CSS：

body{
    background-color: #EEE;
}
.item{
     width: 285px;
     height: 240px;
     float: left;
     margin: 10px;
     padding: 15px;
     background-color:white; 
     background-size: 285px 240px;
     box-shadow: 10px 10px 10px #CCC;
}
.item img{
width:100%;
}