html - 图像周围的边框和阴影不起作用

Question

我正在尝试在“主图像”周围设置边框和框阴影。 通过单击“小图像”，主图像被替换。

您可以看到行为 here .

很遗憾，我无法在主图像周围设置边框和阴影。

 box-shadow:0px 0px 30px black;
   -webkit-box-shadow:0px 0px 30px black;
   -moz-box-shadow:0px 0px 30px black;
   border: 4px solid white;

问题出在哪里，我该如何解决？

感谢您的帮助。

Answer 1

您发布的代码可以正常工作，并且在我的浏览器中也可以正常工作。然后我查看了链接，在搜索了您的来源后，我没有看到您的 CSS 包含在页面中也没有应用于您的图像。所以我添加了它。

这样做之后，我注意到问题在于包含主图像的 div 没有 30px dropshadow 的边距/填充显示。

将其复制并粘贴到您的 CSS 中以查看它是否正常工作:

.imgOuter {
    overflow: hidden;
    width: 775px; //Adjusted Width
    height: 450px; //Adjusted Height
    padding: 20px;
}

.imgOuter img{
    box-shadow:0px 0px 15px #666;
    -webkit-box-shadow:0px 0px 15px #666; 
    -moz-box-shadow:0px 0px 15px #666;
    border: 10px solid #fff;
    margin-bottom: 45px; //Added to shift your other images away from new region
}

我看到您在页面上有所有图像并且有偏移样式，使用上面的 CSS 将需要一些简单的数学来将边距调整回原来的位置。

工作图像: