向水平图像轮播添加框阴影答案

【问题标题】：Adding a box shadow to a horizontal image carousel向水平图像轮播添加框阴影
【发布时间】：2018-08-29 02:48:10
【问题描述】：

我尝试将 box-shadow 添加到 img 中，即使我只设置水平偏移量，图像之间的空间也会产生阴影。

*{
  box-sizing: border-box;
}

html, body{
  width: 100%;
}

body{
  margin:0 auto;
}

.wrapper{
  display: flex;
  height: 600px;
  align-items: center;
}

img {
  min-height: 400px;
  max-height: 420px;
  padding-right: 2em;
  padding-left: 1em;
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}

<body>
<div class="wrapper">
  <div class="img">
    <img src="tree.jpg">
    </div>
    <img src="succulent.jpg">
    <img src="car.jpg">
    <img src="road.jpg">
    <img src="over.jpg">
    <img src="streetphoto.jpg">
    <imgs src="yep.jpg">
</div>
</body>

【问题讨论】：

那么您的实际问题是什么？不需要水平框阴影吗？你想要一个垂直的阴影吗？请更新您的问题以添加更多上下文（正如在创建此问题时向您推荐的那样）。这将有助于清楚地说明你想要什么，你不想要什么。我还建议查看how to ask good questions，并选择tour of the site。
我想要图像下方的方框阴影
欢迎您！当我将您的代码放入堆栈 sn-p（也提供突出显示）时，我注意到您在 tree.jpg 之后关闭了您的 div，这基本上使代码末尾的最后一个关闭 </div> 无用。这是故意的吗？
我看不到图片。
相关，可能重复：drop shadow only bottom css3

标签： html css

【解决方案1】：

我试图弄清楚你想要做什么，我猜你只需要使用边距而不是填充。填充改变它们所属对象的大小。边距不这样做。

  img {
    min-height: 400px;
    max-height: 420px;
    margin-right: 2em;
    margin-left: 1em;
    box-shadow:  0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}

如果你使用这个，图像和阴影之间不会有距离，而是图像之间。

【讨论】：