html - 缩略图框的内部阴影

Question

这是我的网站 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 hover-ready 是否正确。

你能帮帮我吗？

Answer 1

您是否缺少“.”在你的选择器中悬停准备好了吗？

.rollover-project.hover-ready{

}

编辑再看一下， anchor 内的图像覆盖了插入边框。您可以尝试向元素添加一点填充以显示阴影或重新排序您的元素/将阴影应用于不同的元素

例如

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