html中图片效果代码

在HTML中，图片是网站设计中非常重要的元素之一，为了让图片更加美观，我们可以使用一些图片效果代码。

/* 1. 圆形图片效果 */
img {
   border-radius: 50%;
}

/* 2. 边框图片效果 */
img {
   border: 5px solid #000;
}

/* 3. 阴影图片效果 */
img {
   Box-shadow: 5px 5px 5px #888888;
}

/* 4. 透明度图片效果 */
img {
   opacity: 0.5;
}

/* 5. 反转图片效果 */
img {
   -webkit-transform: scaleX(-1);
   transform: scaleX(-1);
}

/* 6. 缩放图片效果 */
img:hover {
   transform: scale(1.2);
}

/* 7. 旋转图片效果 */
img:hover {
   transform: rotate(45deg);
}

/* 8. 模糊图片效果 */
img {
   filter: blur(5px);
}

/* 9. 灰度图片效果 */
img {
   filter: grayscale(100%);
}

/* 10. 反色图片效果 */
img {
   filter: invert(100%);
}

以上几种图片效果代码只是其中的一部分，开发者可以根据自己网站的需求进行修改和更改。如果想要让图片更加美观，可以尝试运用不同的效果代码来达到不同的效果，从而让网站更加吸引人。