css网页制作作品图片

使用CSS为网页图片添加样式

通过CSS可以为网页中的图片添加多种样式效果，提升视觉吸引力。以下是一些常用的方法：

设置图片边框和圆角

img {
  border: 3px solid #3498db;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

创建响应式图片

.responsive-img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

图片悬停效果

为图片添加交互效果可以增强用户体验：

缩放效果

.img-hover {
  transition: transform 0.3s ease;
}
.img-hover:hover {
  transform: scale(1.05);
}

叠加文字效果

.image-container {
  position: relative;
}
.overlay-text {
  position: absolute;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  color: white;
  width: 100%;
  padding: 10px;
}

创建图片画廊

使用CSS Grid或Flexbox可以轻松创建图片画廊布局：

Grid布局

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 15px;
  padding: 15px;
}

Flexbox布局

.flex-gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.flex-gallery img {
  margin: 10px;
  flex: 1 1 200px;
  max-width: 300px;
}

滤镜效果应用

CSS滤镜可以为图片添加特殊视觉效果：

.filter-effect {
  filter: grayscale(50%) brightness(90%);
  transition: filter 0.3s;
}
.filter-effect:hover {
  filter: grayscale(0%) brightness(100%);
}

图片裁剪与遮罩

使用object-fit属性可以控制图片在容器中的显示方式：

.cropped-img {
  width: 200px;
  height: 200px;
  object-fit: cover;
  object-position: center;
}

对于更复杂的形状，可以使用CSS clip-path：

.clipped-img {
  clip-path: circle(50% at 50% 50%);
}