掌握使用 CSS 边框和圆角属性创建缩略图及圆形头像的方法
理解响应式图像的核心原理，确保图片在多设备上的自适应显示
学会利用透明度属性调整图像视觉效果，以及实现图像的水平居中布局
能够编写符合国内开发习惯的标准化 CSS 代码，替代原有的示例资源
在网页设计中，为图像添加边框是创建缩略图（Thumbnail）最常用的手段。通过 border 属性，我们可以为图像包裹一层清晰的边界，使其在视觉上更加独立和整洁。
border: 定义边框的宽度、样式和颜色。
padding: 设置边框与图像内容之间的内边距，增加呼吸感。
border-radius: 轻微圆角处理，使边框看起来不那么生硬。
以下代码展示了一个带有黑色细边框、圆角和内边距的缩略图效果
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS 缩略图示例</title>
<style>
.thumbnail {
border: 1px solid #333; /* 1像素实线黑色边框 */
border-radius: 5px; /* 5像素圆角 */
padding: 5px; /* 内边距 */
background-color: #f9f9f9; /* 可选：添加背景色增强对比 */
}
</style>
</head>
<body>
<!-- 使用国内可访问的占位图服务 -->
<img src="https://placehold.co/290x200/png"
alt="缩略图示例"
class="thumbnail"
style="width: 290px;">
</body>
</html>
技术要点：
border 属性不仅定义了边框的存在，还决定了其粗细和色彩。
配合 width 和 height 属性，可以精确控制缩略图的最终显示尺寸。
border-radius 属性是 CSS 中极具创意的工具，它能够将方形图像的角落变圆。当数值设置得当时，甚至可以将图像完全转换为圆形或椭圆形，常用于用户头像或图标设计。
border-radius: 50%: 当应用于宽高相等的正方形图像时，该值会创建一个完美的圆形。
宽高比: 若宽高不等，则生成椭圆形。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS 圆形图像</title>
<style>
.circle-img {
border-radius: 50%; /* 关键属性：创建圆形 */
object-fit: cover; /* 防止图像变形，裁剪多余部分 */
border: 2px solid #ddd; /* 可选：添加外圈装饰 */
}
</style>
</head>
<body>
<!-- 保持宽高一致以形成正圆 -->
<img src="https://placehold.co/150x150/png"
alt="圆形图像示例"
class="circle-img"
width="150"
height="150">
</body>
</html>
技术要点：
要获得标准的圆形，必须确保图像的 width 和 height 相等。
建议同时使用 object-fit: cover 属性，以防止原始图片比例不符时发生拉伸变形。
在现代 Web 开发中，页面需要在手机、平板和桌面显示器等多种设备上完美呈现。响应式图像能够根据容器的大小自动调整自身尺寸，避免溢出或显示过小。
max-width: 100%: 限制图像最大宽度不超过其父容器的宽度。如果屏幕变小，图像会自动缩小；如果屏幕变大，图像不会超过其原始尺寸（除非额外设置）。
height: auto: 确保图像在宽度变化时，高度按原始比例自动调整，防止图像变形。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS 响应式图像</title>
<style>
.responsive-img {
max-width: 100%; /* 自适应容器宽度 */
height: auto; /* 保持纵横比 */
display: block; /* 消除底部默认留白 */
}
</style>
</head>
<body>
<div style="width: 60%; border: 1px dashed #ccc; padding: 10px;">
<p>这是一个模拟的容器，图像将在此范围内自适应。</p>
<img src="https://placehold.co/600x400/png"
alt="响应式图像示例"
class="responsive-img">
</div>
</body>
</html>技术要点：
仅设置 width: 100% 可能会导致小图被强行拉大从而模糊，因此推荐使用 max-width。
height: auto 是保持图像不失真的关键。
通过 opacity 属性，开发者可以调整图像的不透明度，创造出半透明、水印或鼠标悬停特效等视觉效果。
opacity: 取值范围为 0.0 到 1.0。
0: 完全透明（不可见）。
1: 完全不透明（原始状态）。
0.5: 半透明，背景内容隐约可见。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS 图像透明度</title>
<style>
.transparent-img {
opacity: 0.5; /* 设置为半透明 */
transition: opacity 0.3s; /* 可选：添加过渡动画 */
}
.transparent-img:hover {
opacity: 1.0; /* 鼠标悬停时恢复不透明 */
}
</style>
</head>
<body>
<img src="https://placehold.co/400x200/png"
alt="透明图像示例"
class="transparent-img"
style="width: 40%;">
<p>将鼠标悬停在图像上以查看效果。</p>
</body>
</html>技术要点：
降低透明度后，图像下方的背景色或其他元素将透过图像显示出来。
此属性常用于制作遮罩层或强调交互反馈。
默认情况下，img 标签是行内元素（inline），直接使用 margin: auto 无法使其居中。我们需要改变其显示模式或利用其他布局技巧。
display: block: 将图像转换为块级元素，使其独占一行，从而允许使用左右外边距。
margin-left: auto 和 margin-right: auto: 当块级元素的左右外边距设为 auto 时，浏览器会自动计算并分配相等的空间，实现水平居中。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS 图像居中</title>
<style>
.centered-img {
display: block; /* 转换为块级元素 */
margin-left: auto; /* 左外边距自动 */
margin-right: auto; /* 右外边距自动 */
/* 或者简写为：margin: 0 auto; */
}
</style>
</head>
<body>
<img src="https://placehold.co/400x200/png"
alt="居中图像示例"
class="centered-img"
style="width: 40%;">
</body>
</html>技术要点：
必须先将 display 设置为 block（或 flex、grid 等），margin: auto 才能生效。
这种方法适用于单张图片的简单居中场景。
如果在制作圆形头像时，原始图片的宽高不一致（例如长方形），直接应用 border-radius: 50% 会产生什么形状？如何修改 CSS 以确保最终显示为正圆且不拉伸图片内容？
在响应式设计中，为什么推荐使用 max-width: 100% 而不是直接设置 width: 100%？这两种设置在高分辨率屏幕上对图像清晰度有何不同影响？
除了使用 display: block 配合 margin: auto 之外，还有哪些现代 CSS 布局方法（如 Flexbox 或 Grid）可以实现图像的水平居中？请简述其思路。