[分享]css中小照相机图标制作

在Web开发中，常常需要用到小照相机图标，用于表示一个拍照的按钮或者上传图片的功能。这篇文章将介绍如何使用CSS制作一个小照相机图标。.camera { width: 20px; height: 20...

在Web开发中，常常需要用到小照相机图标，用于表示一个拍照的按钮或者上传图片的功能。这篇文章将介绍如何使用CSS制作一个小照相机图标。

.camera {
  width: 20px;
  height: 20px;
  background-color: #fff;
  border-radius: 50%;
  border: 2px solid #666;
  position: relative;
  overflow: hidden;
}
.camera:before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  background-color: #666;
  border-radius: 50%;
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
}
.camera:after {
  content: "";
  display: block;
  width: 2px;
  height: 8px;
  background-color: #666;
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
} 

代码中首先定义了一个.camera类，用于表示整个小照相机图标。通过设置宽高、背景色、边框和圆角，我们可以让小照相机看上去更加真实。同时，为了限制内部元素的显示范围，我们设置了overflow: hidden。

接下来，我们使用伪元素:before和:after来创建小照相机中的两个重要元素：照相机镜头和闪光灯。通过设置宽高、背景色、圆角和位置等属性，我们可以将它们放置在合适的位置。

最后，我们只需要将.camera类应用到HTML元素中，即可使用这个小照相机图标。例如：

<button>拍照<i class="camera"></i></button>
<label for="file">上传图片<i class="camera"></i></label> 

这里我们在按钮和标签中加入了标签，然后给它们添加了camera类。这样就可以让它们显示出小照相机图标了。