Question

我试图将盒形阴影添加到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>

Answer 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);
}

如果使用此选项，则图像和阴影之间将没有距离，而图像之间将没有距离。

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

1 个答案: