Question

如何使用CSS在背景图像上添加阴影效果？我想在背景图片的左侧，右侧和底部有阴影吗？

Answer 1

添加阴影的命令是“盒子阴影”。但是您可以使用此网站为您自动执行此操作：

https://www.cssmatic.com/box-shadow

Answer 2

有一个非常方便的工具可以在这里https://cssgenerator.org/box-shadow-css-generator.html为您提供帮助。

这是出现在您提到的区域中的阴影的示例

box-shadow: 0px 6px 10px 0px rgba(0, 0, 0, 0.57);

我为您提供了一个示例：

.shadow {
  width: 90%;
  margin: 20px;
  height: 100px;
  background: url(https://placekitten.com/640/360);
  box-shadow: 0px 6px 10px 0px rgba(0, 0, 0, 0.57);
  -webkit-box-shadow: 0px 6px 10px 0px rgba(0, 0, 0, 0.57);
  -moz-box-shadow: 0px 6px 10px 0px rgba(0, 0, 0, 0.57);
}

<div class="shadow"></div>

Answer 3

div {
  width: 300px;
  height: 300px;
  box-shadow: 0 15px 30px #888 inset
}

<div>

</div>

引用框阴影的插入属性：https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow#Values

如何在背景图像的左侧，右侧和底部添加阴影效果

3 个答案: