完整的 CSS 参考

以下是您可以应用于图像的 CSS 效果和边框的全面参考,以及每个示例:

  1. 边框: 在图像周围添加边框。
img {
  border: 2px solid black;
}
  1. 盒阴影: 在图像周围添加阴影。
img {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
  1. 不透明度: 调整图像的透明度。
img {
  opacity: 0.5;
}
  1. 灰度: 将图像转换为灰度。
img {
  filter: grayscale(100%);
}
  1. 棕褐色效果: 对图像应用棕褐色效果。
img {
  filter: sepia(100%);
}
  1. 模糊: 使图像模糊。
img {
  filter: blur(5px);
}
  1. 亮度: 调整图像的亮度。
img {
  filter: brightness(50%);
}
  1. 对比度: 调整图像的对比度。
img {
  filter: contrast(200%);
}
  1. 色相旋转: 旋转图像的色相。
img {
  filter: hue-rotate(90deg);
}
  1. 反转: 反转图像的颜色。
img {
  filter: invert(100%);
}
  1. 饱和度: 调整图像的饱和度。
img {
  filter: saturate(200%);
}
  1. 棕褐色效果: 对图像应用棕褐色效果。
img {
  filter: sepia(100%);
}
  1. 投影阴影: 为图像添加投影阴影效果。
img {
  filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, 0.5));
}
  1. 过渡: 为图像添加过渡效果。
img {
  transition: transform 0.3s ease;
}
img:hover {
  transform: scale(1.1);
}
  1. 动画: 为图像添加动画效果。
@keyframes slidein {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}
img {
  animation: slidein 1s ease;
}

这些只是您可以应用于图像的众多 CSS 效果和边框中的一些示例。尝试不同的样式以创作独特而吸引眼球的设计!