要创建CSS图片廊，你可以使用HTML来表示图像，并使用CSS来定义布局和样式。以下是一个简单的例子：

HTML结构：
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>CSS图片廊</title>
</head>
<body>
  <div class="gallery">
    <div class="gallery-item">
      <img src="image1.jpg" alt="Image 1">
    </div>
    <div class="gallery-item">
      <img src="image2.jpg" alt="Image 2">
    </div>
    <div class="gallery-item">
      <img src="image3.jpg" alt="Image 3">
    </div>
    <!-- 添加更多图像项目 -->
  </div>
</body>
</html>

CSS样式（styles.css）：
body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
}

.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  padding: 20px;
}

.gallery-item {
  margin: 10px;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.gallery-item img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  transition: transform 0.3s ease-in-out;
}

.gallery-item:hover img {
  transform: scale(1.1);
}

在这个例子中，我们使用Flexbox布局来创建一个响应式的图片廊。每个图像项目都被包装在一个带有边距和阴影的容器中。图像的大小会自动调整以适应其容器，并且当鼠标悬停在图像上时，使用CSS的transform属性来放大图像，以提供一些交互效果。

你可以根据需要添加更多的图像项目，并根据设计的需求自定义样式。


转载请注明出处：http://www.pingtaimeng.com/article/detail/12545/CSS