css3怎么制作图片

使用CSS3制作图片效果

CSS3可以通过多种方式创建或处理图片效果，以下是几种常见的方法：

纯CSS绘制简单图形

通过CSS的border、box-shadow、gradient等属性可以绘制基础图形：

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: linear-gradient(to right, #ff9966, #ff5e62);
}

使用伪元素创建复杂图形

通过::before和::after伪元素叠加实现：

.heart {
  position: relative;
  width: 100px;
  height: 90px;
}
.heart::before, .heart::after {
  content: "";
  position: absolute;
  top: 0;
  width: 50px;
  height: 80px;
  background: red;
  border-radius: 50px 50px 0 0;
}
.heart::before {
  left: 50px;
  transform: rotate(-45deg);
}
.heart::after {
  left: 0;
  transform: rotate(45deg);
}

图片滤镜效果

通过filter属性实现图片特效：

.image {
  filter: grayscale(50%) blur(2px);
  transition: filter 0.3s;
}
.image:hover {
  filter: none;
}

支持的效果包括：

• blur()
• brightness()
• contrast()
• drop-shadow()
• hue-rotate()

背景图像处理

使用background相关属性实现高级背景效果：

.banner {
  background: 
    linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
    url('image.jpg') center/cover no-repeat;
}

动画效果

通过@keyframes实现动态图片效果：

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}
.animated-img {
  animation: pulse 2s infinite;
}

遮罩效果

使用mask-image属性创建剪切效果：

.masked-image {
  -webkit-mask-image: url(mask.png);
  mask-image: url(mask.png);
}

响应式图片处理

通过object-fit控制图片适应方式：

.responsive-img {
  width: 100%;
  height: 300px;
  object-fit: cover;
}

混合模式

使用mix-blend-mode实现图片混合：

.blend-mode {
  background: blue;
  mix-blend-mode: screen;
}

以上方法可以根据需求组合使用，创建更复杂的视觉效果。实际项目中建议结合SVG或Canvas处理更复杂的图形需求。