0

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

您可以在此处查看行为。

不幸的是，我无法在主图像周围设置边框和阴影。

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

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

谢谢你的帮助。

4

4 回答 4

1

您的代码段中有很多语法错误会导致这些问题，例如在正文之外打开 div 标签以及在 head 和 body 之间没有 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 并通过首先修复语法来获得结果

于 2013-01-05T19:41:23.197 回答
1

问题出在你的.imgouterdiv 上。它就像一个展示东西的小窗口。您的图像与该窗口的大小相同，这就是您看不到 boxshadow 的原因。（顺便说一句，你没有在你的 jsbin 中给他们一个 boxshadow）。当你点击小图像时，如果你给它.imgInner img一个 boxshadow，你可以看到 boxshadow。您需要使.imgouter尺寸更大才能看到阴影。

做这样的事情：http: //jsfiddle.net/chanckjh/8jM9d/

于 2013-01-05T19:48:47.330 回答
1

您发布的代码可以正常工作，并且可以在我的浏览器中正常工作。然后，我查看了链接，在搜索您的源代码后，我没有看到您的 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将需要一些简单的数学来将您的边距调整回您拥有它们的位置。

工作图像： **截屏**

于 2013-01-05T19:51:43.700 回答
0

试试这个 -

.imgouter {
  border: 4px solid white;
  box-shadow:0px 0px 30px black;
}
于 2013-01-05T19:27:51.540 回答