css3制作边框相册

CSS3是Web设计中的一个重要组成部分，它能够让我们在网页中创建出漂亮的效果。今天我们来学习如何使用CSS3制作出边框相册。

首先，我们在HTML文件中创建一个div元素，用于包含所有的图片：

  <div class="gallery">
    <img src="image1.jpg" alt="Image 1">
    <img src="image2.jpg" alt="Image 2">
    <img src="image3.jpg" alt="Image 3">
  </div>

然后在CSS文件中定义该div的样式，并设置每张图片的相框样式：

  .gallery {
    width: 600px;
    margin: 0 auto;
    overflow: hidden;
  }

  .gallery img {
    border: 10px solid #fff;
    float: left;
    margin: 10px;
    transition: 0.3s border-color ease-in-out;
  }

  .gallery img:hover {
    border-color: #aaa;
  }

在上述代码中，我们对图片设置了10像素的白色边框，并设置了图片浮动和外边距。我们还添加了一些动画效果，当鼠标悬停在图片上时，边框颜色会发生变化。

现在我们已经成功地使用CSS3制作了边框相册。你可以在相册中添加更多的图片，并给它们添加不同的样式。通过这个例子，相信你已经掌握了如何在网页中使用CSS3来制作出漂亮的效果。