html - 如何在CSS中为图像添加内阴影

Question

<分区>

Answer 1

将 display: block 添加到 img 元素以删除下面的 padding。这是因为 img 元素默认以内联方式呈现。默认情况下，所有内联 block 元素都有一些 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>