[分享]css3层叠阴影书本效果

CSS3是一种非常有用的工具，它提供了许多强大的样式效果，可以让网页更具有吸引力。其中之一就是层叠阴影，今天我们要讲的是如何使用CSS3来实现一个漂亮的书本效果。.book { width: 300p...

CSS3是一种非常有用的工具，它提供了许多强大的样式效果，可以让网页更具有吸引力。其中之一就是层叠阴影，今天我们要讲的是如何使用CSS3来实现一个漂亮的书本效果。

.book {
  width: 300px;
  height: 400px;
  border: 1px solid #999;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
  position: relative;
}

.book::before {
  content: "";
  position: absolute;
  top: 10px;
  left: -10px;
  width: 10px;
  height: 100%;
  background-color: #eee;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

.book::after {
  content: "";
  position: absolute;
  bottom: 10px;
  left: -10px;
  width: 10px;
  height: 100%;
  background-color: #eee;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

.book > div {
  width: 100%;
  height: 100%;
  position: relative;
  padding: 20px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0,0,0,0.3),0 0 5px rgba(0,0,0,0.5) inset;
  overflow: hidden;
}

.book > div::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(to right,rgba(0,0,0,0.2),rgba(0,0,0,0));
}

.book > div::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(to left,rgba(0,0,0,0.2),rgba(0,0,0,0));
} 

首先，我们创建了一个类名为 "book" 的div元素，并设置了它的宽度和高度，并添加了一个1像素的灰色边框和圆角效果，这就形成了我们的书本基础样式。然后，我们使用"box-shadow"属性添加了一个轻微的阴影效果，让书本更加立体。

接着，我们使用伪类"::before"和"::after"来创建两条竖向的阴影线。这两个元素都设置了宽度为10像素，高度为100%，并在左侧和右侧分别定位。我们还为这两个元素添加了一个灰色背景和一个更强的阴影效果。

最后，我们创建一个子元素，并将它的样式设置为继承"book"类的样式，然后将"padding"属性设置为20像素，使元素内部保持间距。该子元素还继承了"border-radius"属性和灰色的背景颜色。我们为它添加了一个"overflow:hidden"属性，以便裁剪任何溢出的内容。

我们使用伪元素"::before"和"::after"为子元素添加了两条渐变的水平线，从而产生书本内部阴影的效果。这两条线分别在左侧和右侧的50%处定位，它们的背景颜色使用了"linear-gradient"来创建一个透明至黑色的渐变效果。

使用以上代码，我们可以轻松地创建一个漂亮的书本效果。这是CSS3层叠阴影的一个很好的运用，也是创建网页设计的一个好技巧。