网站
引入
图片是网页中最常见的元素之一，用来展示产品、配图、头像、图标等内容。
CSS 可以控制图片的显示效果，例如大小、边框、圆角、阴影、滤镜等，让图片更好地融入页面设计。
正文
定义
定义
CSS 图像样式用于控制
<img>元素及其他图片元素的显示效果，包括尺寸、边框、圆角、阴影、对齐方式和滤镜等。
通过 CSS，可以让图片不只是简单地显示在页面上，还能根据设计需求调整显示效果。
常见属性
尺寸控制
使用 width 和 height 控制图片大小。
img {
width: 300px;
height: auto; /* 自动保持宽高比 */
}通常只设置 width 或 height 其中一个，另一个设为 auto，这样可以保持图片的原始宽高比，避免变形。
边框
使用 border 为图片添加边框。
img {
border: 2px solid #ddd;
}边框可以分别设置四个方向：
border-top：顶部边框border-right：右侧边框border-bottom：底部边框border-left：左侧边框
也可以单独设置边框的宽度、样式和颜色：
border-width：边框宽度border-style：边框样式（solid、dashed、dotted等）border-color：边框颜色
圆角
使用 border-radius 让图片显示圆角。
img {
border-radius: 8px; /* 圆角半径 */
}
/* 圆形图片 */
img.avatar {
width: 100px;
height: 100px;
border-radius: 50%; /* 圆形 */
object-fit: cover; /* 裁剪图片以填充容器 */
}border-radius: 50% 可以让图片显示为圆形，常用于头像。
阴影
使用 box-shadow 为图片添加阴影。
img {
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}阴影参数：水平偏移 垂直偏移 模糊半径 扩展半径 颜色。
轮廓
使用 outline 为图片添加轮廓，和 border 类似但不占用布局空间。
img:hover {
outline: 3px solid #2563eb;
outline-offset: 2px; /* 轮廓和图片的间距 */
}轮廓属性：
outline-width：轮廓宽度outline-style：轮廓样式outline-color：轮廓颜色outline-offset：轮廓偏移距离
对齐方式
使用 display 和 margin 控制图片的对齐方式。
/* 图片居中 */
img {
display: block;
margin: 0 auto;
}
/* 图片左对齐 */
img {
display: block;
margin-left: 0;
}
/* 图片右对齐 */
img {
display: block;
margin-right: 0;
margin-left: auto;
}裁剪和填充
使用 object-fit 控制图片在容器中的裁剪和填充方式。
img {
width: 200px;
height: 200px;
object-fit: cover; /* 裁剪图片以填充容器 */
}object-fit 的值：
fill：拉伸图片以填充容器（可能变形）contain：缩放图片以适应容器（保持宽高比，可能有空白）cover：裁剪图片以填充容器（保持宽高比，可能裁掉部分内容）none：不缩放，保持原始大小scale-down：取none和contain中较小的那个
滤镜效果
使用 filter 为图片添加滤镜效果。
/* 灰度 */
img {
filter: grayscale(100%);
}
/* 模糊 */
img {
filter: blur(5px);
}
/* 亮度 */
img {
filter: brightness(1.2);
}
/* 对比度 */
img {
filter: contrast(1.5);
}
/* 饱和度 */
img {
filter: saturate(2);
}可以组合多个滤镜：
img:hover {
filter: brightness(1.1) contrast(1.2) saturate(1.3);
}例子
圆形头像
<img src="avatar.jpg" alt="用户头像" class="avatar">.avatar {
width: 80px;
height: 80px;
border-radius: 50%;
border: 2px solid #e5e7eb;
object-fit: cover;
}这个例子让头像显示为圆形，并带有浅灰色边框。
卡片图片
<div class="card">
<img src="product.jpg" alt="产品图片">
<h3>产品名称</h3>
<p>产品描述</p>
</div>.card img {
width: 100%;
height: 200px;
object-fit: cover;
border-radius: 8px 8px 0 0; /* 只圆角上边 */
}
.card img:hover {
filter: brightness(1.1);
transition: filter 0.3s;
}这个例子让卡片图片填充容器宽度，保持固定高度，顶部显示圆角，鼠标移上去时图片变亮。
图片画廊
<div class="gallery">
<img src="photo1.jpg" alt="照片1">
<img src="photo2.jpg" alt="照片2">
<img src="photo3.jpg" alt="照片3">
</div>.gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.gallery img {
width: 100%;
height: 200px;
object-fit: cover;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
transition: transform 0.3s, box-shadow 0.3s;
}
.gallery img:hover {
transform: translateY(-4px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}这个例子创建一个响应式图片画廊，图片带有圆角和阴影，鼠标移上去时图片上浮并增强阴影。
特点
width和height控制图片尺寸- 通常只设置
width或height其中一个，另一个设为auto保持宽高比 border添加边框，border-radius添加圆角box-shadow添加阴影，outline添加轮廓object-fit控制图片在容器中的裁剪和填充方式filter可以添加多种视觉效果，例如灰度、模糊、亮度调节等- 使用
display: block和margin: 0 auto可以让图片居中显示 - 图片默认是内联元素，可以用
display: block改为块级元素
注意事项
- 图片尺寸不要只设置
width或height一个固定值，另一个也固定，这样会导致图片变形 - 使用
object-fit: cover时，图片可能会被裁剪，注意图片的重要内容是否被裁掉 border-radius: 50%要配合相同的width和height使用，才能显示正圆- 滤镜效果可能影响性能，不要在大量图片上同时使用复杂滤镜
- 图片应该设置
alt属性，提升可访问性和 SEO - 响应式图片可以使用
max-width: 100%让图片自适应容器宽度 outline不占用布局空间，不会影响其他元素位置
理解
可以把 CSS 图像样式理解为”图片的装饰和适配工具”。
它让图片不只是简单地显示原始尺寸和样式，而是可以根据设计需求调整大小、添加边框和圆角、设置阴影和滤镜，让图片更好地融入页面整体风格。
例如，头像通常需要圆形显示，卡片图片需要圆角和阴影，画廊图片需要统一尺寸和悬停效果。
CSS 图像样式的核心价值是让图片的显示效果更灵活、更符合设计需求，同时通过 object-fit 等属性解决不同宽高比图片的适配问题。
引出
理解了图像样式之后，可以继续学习：
也可以学习响应式图片的处理方式，例如使用 <picture> 标签和 srcset 属性。