图像周围的边框和阴影不工作

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

你的代码片段中存在很多导致这些问题的语法错误，例如在正文之外打开div标签，并且在头部和身体之间没有doctype打开脚本标签等。

http://validator.w3.org/check?uri=http%3A%2F%2Fjsbin.com%2Fwelcome%2F70057%23img1&charset=%28detect+automatically%29&doctype=Inline&group=0

我相信你可以简单地将你的css应用到img并通过首先修复语法来获得结果

Answer 2

问题在于您的.imgouter div。这就像是一个展示东西的小窗口。您的图像与该窗口的大小相同，这就是您无法看到框图阴影的原因。 （顺便说一句，你没有在你的jsbin中给他们一个盒子阴影）。当您点击小图片时，如果您为此.imgInner img提供一个方框图标，则可以看到方框图。您需要使.imgouter尺寸更大才能看到阴影。

执行以下操作：http://jsfiddle.net/chanckjh/8jM9d/

Answer 3

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

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

在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将需要一些简单的数学运算来将你的边距调整回你所拥有的位置。

工作形象：

Answer 4

试试这个 -

.imgouter {
  border: 4px solid white;
  box-shadow:0px 0px 30px black;
}