缩略图框的内部阴影

这是我的网站http://goo.gl/MeCxv2，当我在主页上放置了我的图库缩略图时，我想为所有缩略图框添加内部阴影。我想这样的http://goo.gl/L80HAx但CSS代替的Photoshop：d缩略图框的内部阴影

于是，我试着这样做：

.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; 
}

但它不工作，我甚至不能确定，那类.rollover-project悬停就绪是正确的。

你能帮我吗？

来源

2016-03-08 Merkucio

1]由于[]用于选择类的名字，你将有，无论你使用类名来使用它，所以如果你要选择2类名应该是.rollover-project.hover-ready OR .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即内框，它会重叠由<a>标签的缩略图，并通过他的建议你已经2个选项

我]添加框阴影父/外部元素（这是我的建议）
II]添加填料使有一些空间可以显示箱形阴影。

由于您想要1px的方块阴影，请添加padding:1px并查看效果。另一个线程上的类似示例 - putting a inset box shadow on an image or image within a div

来源

2016-03-08 17:26:06 Spidey

对不起，但不起作用） – Merkucio

.wf-cell category-31 isotope-item { }这种方式也行不通。 – Merkucio

它可以应用于任何唯一的类名，如果它不适用于'.wf-cell.category-31.isotope-item {}'组合，如果它正确识别缩略图的话。你可以修改css并进行测试。 – Spidey

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

.rollover-project.hover-ready{ 

}

编辑望着这多一点，你的内部锚图像被掩盖嵌入边框。您可以尝试向元素添加一点填充以显示阴影或重新排序元素/将阴影应用于不同元素。

.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; 
}

来源

2016-03-08 17:18:47 r8n5n

不，这里没有点。无论如何，.rollover-project.hover-ready也不起作用。也许我带浏览器检查元素选项错误的类？ – Merkucio

@Merkucio点仅在CSS中引用，而不是在HTML中引用。 – Spidey

无论如何.rollover-project.hover-ready不起作用。 – Merkucio

缩略图框的内部阴影

回答

相关问题