图像样式
图片圆角/缩略图/响应式、filter 滤镜、卡片图片
图像样式
CSS 处理图片不仅仅是尺寸——圆角、滤镜、卡片图、居中裁剪。
学完本章你将： 掌握图片圆角/缩略图/响应式、filter 滤镜。
图片美化
css
/* 圆角图片 */
img.rounded { border-radius: 10px; }
img.circle { border-radius: 50%; }
/* 缩略图 */
img.thumbnail {
width: 150px;
border: 1px solid #ddd;
padding: 5px;
}
img.thumbnail:hover { box-shadow: 0 0 10px rgba(0,0,0,0.3); }
/* 响应式 */
img.responsive { max-width: 100%; height: auto; }filter 滤镜
css
img.blur { filter: blur(5px); } /* 模糊 */
img.brightness { filter: brightness(0.5); } /* 变暗 */
img.contrast { filter: contrast(150%); } /* 对比度 */
img.grayscale { filter: grayscale(100%); } /* 灰度 */
img.sepia { filter: sepia(100%); } /* 复古 */
img.saturate { filter: saturate(3); } /* 饱和度 */
/* 组合 */
img.combined { filter: brightness(0.8) contrast(120%); }
/* hover 效果 */
img { filter: grayscale(100%); transition: filter 0.3s; }
img:hover { filter: grayscale(0); }卡片图片
css
.card-img {
width: 100%;
height: 200px;
object-fit: cover; /* 裁剪填充 */
border-radius: 10px 10px 0 0;
}