Question

这是我的网站http://goo.gl/MeCxv2，当我在主页上有我的porfolio缩略图时，我想为所有缩略图框添加内部阴影。我希望得到这样的http://goo.gl/L80HAx但是用CSS而不是photoshop：D

所以，我试着这样做：

...
"Bonuses": [
    "MainTheme",
    "ClassicUI",
    "WoodUI",
    "Rampage",
    "SoleSurvivor"
],
...

但它不起作用，我甚至不确定，类.rollover-project hover-ready是否正确。

你能帮我吗？

Answer 1

你错过了'。'在您的选择器中悬停准备？

.rollover-project.hover-ready{

}

修改再看一下，锚点内的图像覆盖了嵌入边框。您可以尝试在元素中添加一点填充以显示阴影或重新排序元素/将阴影应用于其他元素

e.g。

.rollover-project.hover-ready{ -moz-box-shadow: inset 0 0 10px #000000 !important; -webkit-box-shadow: inset 0 0 10px #000000 !important; box-shadow: inset 0 0 10px #000000 !important; padding: 10px; }

Answer 2

1]由于[。]用于选择类名，因此您必须在使用类名的任何地方使用它，因此如果要选择2个类名，则应为.rollover-project.hover-ready或.hover-ready.rollover-project而不是.rollover-project hover-ready

有关CSS选择器的帮助，请参阅以下链接 W3Schools - CSS Selectors

2]盒子阴影未应用于正确的元素;它应该应用在主框元素的类上，

<div class="wf-cell category-31 isotope-item">

编辑如@ r8n5n所述，如果您将框阴影应用于类.rollover-project.hover-ready（即内部框），它将与{{1中的缩略图重叠标签，并按照他的建议你有2个选项

i]将box-shadow添加到父/外元素（这是我的建议）
ii]添加填充，以便有一些空间来显示框阴影。

由于您需要1px的box-shadow，请添加<a>并查看效果。另一个线程上的类似示例 - putting a inset box shadow on an image or image within a div

缩略图框的内部阴影

2 个答案: