如果您可以进行设置，以便在图像区域的内部添加一个 1 像素的透明黑色笔触，您会发现它更适用于各种图像。

在上面的示例中，我使用不透明度为 40% 的黑色作为笔划。

我不知道使用 CSS 执行此操作的最佳方法。也许是第二个四边小 1px 的 div，有边框？您可能可以使用很多方法。

您可以尝试通过设置 1px 边框（可能与外边框相同的灰色）并添加 1px 边距以在图像之间创建单独的白色边框，从而在图像周围添加一个“框架”。这将显示为“双”边框，并且使用白色边框部分，它将使阴影以类似于背景已经是白色的图像的方式突出。

在顶部使用圆角，在底部使用方角，使其跟随外边界。

我刚刚添加了额外边框的图像示例：

图像的css代码如下所示：

img.product_sample
{
  border: solid 1px rgba(0, 0, 0, 0.2);
  border-top-radius: 3px;
  margin: 1px; /* Causes the background color of the container work as an extra border */
}

另一种方法是只使用白色边框。当图像内容背景为白色时，这不会与您的原始版本产生明显差异：

img.product_sample
{
  border: solid 1px white;
  border-top-radius: 3px;
  margin: 0px;
}

希望像这样的“通用”装饰同样适用于所有可能的图像色调和颜色，这有点过于乐观了。可取之处在于您可能不会孤立地展示这些。观看者将从阴影清晰可见且吸引人的地方“获得想法”，此后将忽略它。商品是人们关注的焦点，也是他们将关注的重点。

不过，一般来说，当您必须处理您无法控制（也无法预测）的高度可变的项目时，最好让事情尽可能简单。完全省略顶部阴影不会丢失任何东西，并且可以避免示例中的“图像模糊”效果。下面的阴影可以为“卡片”提供一点维度，您可以控制该背景。

试试这个 CSS

box-shadow: 0 -2px 5px -2px rgba(0, 0, 0, 0.2);
border-top: 1px solid rgba(255, 255, 255, 0.75);
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
border-right: 1px solid rgba(0, 0, 0, 0.1);
border-left: 1px solid rgba(0, 0, 0, 0.1);

这会添加一点内阴影，以便在较暗的背景上看起来更好。

工作演示：http: //jsfiddle.net/Sm97x/