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

Question

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

这是我目前拥有的：

.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: block 重置 display 属性。请参阅下面的演示：

/* 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>

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

How to add inner shadow to image in CSS

html

css

image

display

box-shadow