制作图片css

使用 CSS 制作图片效果

通过 CSS 可以为图片添加多种视觉效果，包括边框、阴影、滤镜、圆角等。以下是一些常见的 CSS 图片效果实现方法。

添加圆角效果

使用 border-radius 属性可以为图片添加圆角。数值越大，圆角越明显。

img {
  border-radius: 10px;
}

如果需要圆形图片，可以将 border-radius 设为 50%。

img {
  border-radius: 50%;
}

添加阴影效果

使用 box-shadow 属性可以为图片添加阴影效果。

img {
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}

参数依次为水平偏移、垂直偏移、模糊半径和颜色。

添加滤镜效果

CSS 的 filter 属性可以为图片添加多种滤镜效果，如灰度、模糊、亮度调整等。

img {
  filter: grayscale(50%);
}

其他常用滤镜：

• blur(5px)：模糊效果
• brightness(150%)：亮度调整
• contrast(200%)：对比度调整

添加悬停效果

通过 :hover 伪类可以为图片添加交互效果。

img:hover {
  transform: scale(1.1);
  transition: transform 0.3s ease;
}

这段代码会在鼠标悬停时放大图片，并添加平滑过渡效果。

响应式图片

确保图片在不同设备上都能正确显示，可以使用以下 CSS：

img {
  max-width: 100%;
  height: auto;
}

这会让图片在容器内自动调整大小，同时保持宽高比。

图片遮罩效果

使用 object-fit 可以控制图片在容器内的显示方式。

.container {
  width: 300px;
  height: 200px;
  overflow: hidden;
}

.container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

object-fit: cover 会让图片填充整个容器，可能会裁剪部分内容。

图片黑白效果

通过 CSS 可以轻松实现图片的黑白效果。

img.desaturate {
  filter: grayscale(100%);
}

将 grayscale 设为 100% 即可完全去除颜色。

图片边框效果

为图片添加艺术边框可以通过 border 和 padding 实现。

img.framed {
  border: 10px solid #f0f0f0;
  padding: 5px;
  background: white;
  box-shadow: 0 0 5px rgba(0,0,0,0.3);
}

图片旋转效果

使用 transform 属性可以旋转图片。

img.rotate {
  transform: rotate(15deg);
}

负值会反向旋转图片。

图片透明度调整

通过 opacity 属性可以调整图片透明度。

img.transparent {
  opacity: 0.7;
}

值为 1 表示完全不透明，0 表示完全透明。