如何使封面看起来像一本书？

Question

我喜欢iBooks中的这种书本设计，一直想知道可以使用CSS轻松制作吗？

原始照片

Answer 1

您尝试过渐变和阴影吗？

.cover {
  background: linear-gradient(to right, rgb(60, 13, 20) 3px, rgba(255, 255, 255, 0.5) 5px, rgba(255, 255, 255, 0.25) 7px, rgba(255, 255, 255, 0.25) 10px, transparent 12px, transparent 16px, rgba(255, 255, 255, 0.25) 17px, transparent 22px), url(https://images-na.ssl-images-amazon.com/images/I/51pnouuPO5L.jpg);
  box-shadow: 0 0 5px -1px black, inset -1px 1px 2px rgba(255, 255, 255, 0.5);
  margin: auto;
  border-radius: 5px;
  width: 389px;
  height: 500px;
}

body {
  min-height: 100vh;
  display: flex;
}

<div title=" Don't make me think " class="cover"></div>

Answer 2

我认为使用CSS中的渐变可以很容易地做到这一点。这是一个（非常粗糙的）示例小提琴：https://jsfiddle.net/6yok9c4w/

HTML：

<div class="overlay">
</div>
<img src="https://images-na.ssl-images-amazon.com/images/I/51pnouuPO5L.jpg" />

CSS：

.overlay {
  width: 400px;
  height: 500px;
  position: fixed;
  top: 0;
  left: 0;
  background: linear-gradient(90deg, rgba(2,0,36,.5) 0%, rgba(0,0,0,.5) 2%, rgba(255,255,255,.5) 3%, rgba(247,254,255,.5) 5%, rgba(0,0,0,.5) 7%, rgba(255,255,255,.5) 13%, rgba(255,255,255,.2) 100%);
}
img {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
}

我使用此工具生成了渐变：https://cssgradient.io/

通过更多的努力和调整，我认为您可以真正接近原始版本。