css图片大全 |css动画效果展示

/*  1. 图片边框  */
img {
border: 2px solid #f1f1f1;
}
/*  2. 图片圆角  */
img {
border-radius: 50%;
/* 或者指定像素值 */
border-radius: 10px;
}
/*  3. 图片阴影  */
img {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}
/*  4. 图片模糊效果  */
img {
filter: blur(3px);
}
/*  5. 图片灰色  */
img {
filter: grayscale(100%);
}
/*  6. 图片反转  */
img {
transform: rotate(180deg);
}
/*  7. 图片大小调整  */
/* 按比例缩小 */
img {
width: 50%;
height: auto;
}
/* 按指定值缩小 */
img {
width: 200px;
height: 200px;
}
/*  8. 图片变暗  */
img {
opacity: 0.5;
}
/*  9. 图片透明度渐变  */
img {
transition: opacity .5s ease;
}
img:hover {
opacity: 0.7;
}
/*  10. 图片背景  */
/* 使用 div 元素创建带背景的图片 */
/* 把图片作为背景 */
img {
background-image: url('image.jpg');
}

以上是一些常用的 CSS 技巧，可以让大家更好地处理图片。您可以根据自己的需求和创意，调整这些技巧的属性，以便实现您自己想要的效果。这些技巧既可以用于个人项目，也可以用于商业项目，都能提升网站的视觉效果。