CSS页面剥离底部和左右阴影

Posted 2023-03-13

【中文标题】CSS页面剥离底部和左右阴影

【英文标题】：CSS Page peel bottom together with shadow left and right

【发布时间】：2015-05-20 21:21:18

【问题描述】：

我想用 css shadow 创建这个页面（见图）。这可能吗？那么要让页面左右剥离css box阴影和左右阴影？

【问题讨论】：

为什么不直接使用开发工具查看页面元素，以更多地了解它们是如何从您从哪里获取的？

cssdeck.com/labs/different-css3-box-shadows-effects

以上是我自己完成的，但在 div 结构中使用 bg 图像。现在我想将其更改为 css，但不确定如何。

【参考方案1】：

您可以使用伪元素 :before 和 :after 来做到这一点。创建两个具有自己的盒子阴影的新区域并将它们放置在需要的位置，您可以创建阴影随着页面下降而变大的错觉。

body 
  background: lightgrey;

div 
  background: white;
  margin: 40px auto;
  height: 500px;
  width: 300px;
  position: relative;
  padding: 10px;

div:before,
div:after 
  height: 97%;
  z-index: -10;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 8px;
  width: 30%;
  top: 2%;
  max-width: 300px;
  background: transparent;
  box-shadow: -10px 0px 5px rgba(0, 0, 0, 0.3);
  transform: rotate(1deg);

div:after 
  transform: rotate(-1deg);
  right: 8px;
  left: auto;
  box-shadow: 10px 0px 5px rgba(0, 0, 0, 0.3);

<div>
  test
</div>

另一种方法是使用 CSS 转换来更改单个 :before 伪元素的透视。

这是由 Harry ** 完成的

body 
  background: lightgrey;

div 
  background: white;
  margin: 40px auto;
  height: 500px;
  width: 300px;
  position: relative;
  padding: 10px;
  box-shadow: 10px 0px 5px -10px gray, -10px 0px 5px -10px gray;

div:after 
  content: '';
  position: absolute;
  bottom: 10px;
  left: 0px;
  height: 50%;
  width: 100%;
  transform-origin: 50% 100%;
  transform: perspective(100px) rotateX(1deg);
  box-shadow: 5px 0px 10px gray, -5px 0px 10px gray;
  z-index: -1;

<div></div>

CSS :before & :after