如何在CSS中向图像添加内部阴影

Question

我正在尝试向图像添加内部阴影，但无法获得想要的结果。

这是我目前拥有的：

https://codepen.io/nvision/pen/lBKEy

.shadow {
  display: inline-block;
  position: relative;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  -moz-box-shadow: rgba(0, 0, 0, 0.8) 3px 3px 10px inset;
  -webkit-box-shadow: rgba(0, 0, 0, 0.8) 3px 3px 10px inset;
  box-shadow: rgba(0, 0, 0, 0.8) 3px 3px 10px inset;
}

.shadow img {
  max-width: 100%;
  position: relative;
  z-index: -1;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}

问题是图像底部和实际内部阴影之间存在浅灰色填充。我想要的是完全没有填充。只是一个内在的阴影而已。

这是我要实现的目标的一个示例：

Answer 1

在display: block元素中添加img，以删除下面的 padding 。这是因为img元件内嵌在默认情况下呈现。默认情况下，所有内联块元素都有一些vertical-align值-通过应用vertical-align: top重置它，或者通过应用display重置display: block属性。参见下面的演示：

/* apply a natural box layout model to all elements */
*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.shadow {
  display: inline-block;
  position: relative;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  -moz-box-shadow: rgba(0, 0, 0, 0.8) 3px 3px 10px inset;
  -webkit-box-shadow: rgba(0, 0, 0, 0.8) 3px 3px 10px inset;
  box-shadow: rgba(0, 0, 0, 0.8) 3px 3px 10px inset;
  -webkit-transition: box-shadow 0.2s ease-in;
  -moz-transition: box-shadow 0.2s ease-in;
  transition: box-shadow 0.2s ease-in;
}
.shadow:hover {
  -moz-box-shadow: rgba(0, 0, 0, 0.8) 5px 5px 55px inset;
  -webkit-box-shadow: rgba(0, 0, 0, 0.8) 5px 5px 55px inset;
  box-shadow: rgba(0, 0, 0, 0.8) 5px 5px 55px inset;
}
.shadow img {
  max-width: 100%;
  position: relative;
  z-index: -1;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  display: block; /* ADDED */
}

.column {
  float: left;
  width: 25%;
  padding: 0 15px;
}

<div class="column">
  <div class="shadow">
    <img src="http://fillmurray.com/250/250">
  </div>  
</div>

<div class="column">
  <div class="shadow">
    <img src="http://fillmurray.com/370/370">
  </div>
</div>

<div class="column">
  <div class="shadow">
    <img src="http://fillmurray.com/200/200">
  </div>
</div>

<div class="column">
  <div class="shadow">
    <img src="http://fillmurray.com/400/400">
  </div>
</div>