CSS | 宝丽来图片

简介

宝丽来图片（Polaroid）是一种拍立得相机拍出的照片风格，在Web开发中，我们可以使用CSS来模仿宝丽来图片的效果，并将其应用在网站设计中，增加视觉效果，提升用户体验。

实现方式

1. 使用CSS3的滤镜

使用CSS3的滤镜可以非常简单地实现宝丽来图片的效果，代码如下：

.photo {
  display: inline-block;
  margin: 10px;
  width: 200px;
  height: 200px;
  background: url(https://img.lens.cool/static/images/brand/polaroid.png) no-repeat center/cover;
  filter: sepia(50%) saturate(1.5) contrast(0.9);
}

在上面的代码中，我们首先定义了一个.photo类来表示需要应用宝丽来效果的元素，然后设置了一些基本样式，例如display: inline-block来让元素能够显示为块级元素，margin: 10px来设置元素之间的间距，width: 200px和height: 200px来设置宽高等。接下来，我们设置了元素的背景图片，这里使用了一个宝丽来图片的图片作为背景。最后，我们通过filter属性来应用滤镜效果，这里我们使用了sepia()函数来增加棕色色调，saturate()函数来提高饱和度，contrast()函数来降低对比度，从而使得图片看起来更加怀旧。

2. 使用CSS3的伪元素

除了使用滤镜效果外，我们还可以使用CSS3的伪元素来实现宝丽来图片的效果。代码如下：

.photo {
  display: inline-block;
  margin: 10px;
  width: 200px;
  height: 200px;
  position: relative;
}

.photo:before {
  content: "";
  display: block;
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  border: 10px solid #fff;
  box-shadow: 0 0 0 10px rgb(189, 180, 169), 0 0 2px 12px rgba(0, 0, 0, 0.5);
  transform: rotate(-3deg);
}

.photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

在上面的代码中，我们首先定义了一个.photo类来表示需要应用宝丽来效果的元素，然后设置了一些基本样式，例如display: inline-block来让元素能够显示为块级元素，margin: 10px来设置元素之间的间距，width: 200px和height: 200px来设置宽高等。接下来，我们通过.photo:before伪元素来创建一个白色边框以及黑色阴影的图层，同时通过transform属性来使其有倾斜的效果。最后，我们在.photo元素内部添加一个<img>标签来加载真实的图片，通过object-fit属性来使其铺满整个父容器。

结语

通过以上两种方式，我们可以轻松地实现宝丽来图片的效果，这不仅能够增加网站的美观程度，还能够有效提升用户体验。