一、基本的图片样式

在Web开发中，图片是一个非常重要的元素，因为图片可以大大丰富网页的内容，吸引用户的眼球。样式可以用来为图片添加不同的效果，使其更加引人注目。 下面是一些基本的图片样式：

/* 图片设置为块级元素 */
img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
}
/* 图片居中 */
img {
  display: block;
  margin: 0 auto;
}
/* 图片添加边框 */
img {
  border: 1px solid #999;
}
/* 图片圆角 */
img {
  border-radius: 5px;
}
/* 图片设置为灰色 */
img {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

二、图片阴影效果

阴影效果可以让图片看起来更加逼真，给用户带来更好的体验。 下面是几种常见的图片阴影效果：

/* 添加小的阴影 */
img {
  box-shadow: 1px 1px 5px #999;
}
/* 添加大的阴影 */
img {
  box-shadow: 3px 3px 10px #999;
}
/* 投影向上 */
img {
  box-shadow: 0px -5px 10px #999;
}
/* 投影向下 */
img {
  box-shadow: 0px 5px 10px #999;
}

三、图片滤镜效果

滤镜效果可以为图片添加不同的颜色和亮度，使其更加鲜明。 下面是几种常见的图片滤镜效果：

/* 图片变暗 */
img {
  -webkit-filter: brightness(0.5);
  filter: brightness(0.5);
}
/* 图片变亮 */
img {
  -webkit-filter: brightness(1.5);
  filter: brightness(1.5);
}
/* 图片灰色 */
img {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}
/* 图片反转 */
img {
  -webkit-filter: invert(100%);
  filter: invert(100%);
}
/* 图片模糊 */
img {
  -webkit-filter: blur(5px);
  filter: blur(5px);
}

四、图片动画效果

动画效果可以为图片添加更多的生动感，让用户在浏览页面时更加愉快。 下面是几种常见的图片动画效果：

/* 图片悬停效果 */
img:hover {
  box-shadow: 1px 1px 5px #999;
  transform: scale(1.1);
}
/* 图片抖动效果 */
@-webkit-keyframes shake {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  10% {
    -webkit-transform: translateX(-5px);
    transform: translateX(-5px);
  }
  20% {
    -webkit-transform: translateX(5px);
    transform: translateX(5px);
  }
  30% {
    -webkit-transform: translateX(-5px);
    transform: translateX(-5px);
  }
  40% {
    -webkit-transform: translateX(5px);
    transform: translateX(5px);
  }
  50% {
    -webkit-transform: translateX(-5px);
    transform: translateX(-5px);
  }
  60% {
    -webkit-transform: translateX(5px);
    transform: translateX(5px);
  }
  70% {
    -webkit-transform: translateX(-5px);
    transform: translateX(-5px);
  }
  80% {
    -webkit-transform: translateX(5px);
    transform: translateX(5px);
  }
  90% {
    -webkit-transform: translateX(-5px);
    transform: translateX(-5px);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
img:hover {
  animation: shake 0.5s;
}
/* 图片旋转效果 */
@-webkit-keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
img:hover {
  animation: rotate 2s linear infinite;
}