在HTML中为图片添加圆角效果，可通过CSS的border-radius属性实现，插入图片时，使用`标签并指定src属性，再通过内联样式（如style="border-radius: 10px;"）或外部样式表设置圆角半径，属性值可使用像素（如5px）或百分比（如50%`实现圆形），灵活调整圆角程度，此方法兼容主流浏览器，能快速美化图片边缘，避免生硬直角，提升页面视觉协调性，常用于头像、产品图等场景，使设计更符合现代简约风格。
HTML图片插入与圆角效果实现指南
在网页设计中,图片是传递信息、提升视觉体验的核心元素，无论是产品展示、文章配图还是头像设计，合理插入图片并添加圆角效果，都能让页面更柔和、更具现代感，本文将详细介绍HTML中插入图片的基本方法，以及通过CSS实现圆角效果的多种技巧，帮助你轻松优化页面视觉效果。
HTML插入图片基础：<img>标签的用法
在HTML中,图片通过<img>标签插入，该标签是自闭合标签（无需单独闭合），核心属性包括：
src（图片源）
必须属性,用于指定图片的路径，路径可以是：
- 相对路径：图片与HTML文件在同一目录下，直接写文件名（如
<img src="example.jpg">）；若在子目录，则写子目录名/文件名（如<img src="images/photo.jpg">）。 - 绝对路径：完整的网络地址（如
<img src="https://example.com/logo.png">）或本地文件的完整路径（如<img src="C:/Users/Admin/Desktop/image.jpg">）。
alt（替代文本）
该属性用于在图片无法加载时显示替代文字（如网络错误、图片路径错误），同时也是屏幕阅读器识别图片内容的重要依据，有助于提升网页的可访问性。
示例：
<img src="product.jpg" alt="红色运动鞋特写">
width和height（尺寸属性）
用于设置图片的显示宽度和高度（单位：像素px或百分比）。注意：仅设置一个属性时，另一个会按比例自动缩放，避免图片变形；若同时设置两个属性，可能导致拉伸，建议优先用CSS控制尺寸。
示例：
<img src="avatar.png" alt="用户头像" width="100" height="100">
CSS圆角效果：让图片更柔和的"魔法"
圆角效果是图片美化的常用手段,通过CSS的border-radius属性轻松实现，下面详细介绍不同场景下的实现方法。
基础语法：border-radius属性详解
border-radius用于设置元素的圆角，取值可以是：
- 像素值（px）：固定大小的圆角，如
10px表示圆角半径为10像素。 - 百分比（%）：相对于元素尺寸的圆角，如
50%会将图片变成圆形（需宽高相等）。 - 复合写法：支持1-4个值（分别对应左上、右上、右下、左下角），如
border-radius: 10px 20px 30px 40px；若为两个值，则第一个值控制左上和右下，第二个值控制右上和左下。
直接给<img>标签添加圆角
最简单的方式是直接在<img>标签中使用style属性添加border-radius：
<img src="https://example.com/landscape.jpg" alt="风景照片" style="border-radius: 15px;">
效果：图片四个角均为15像素圆角，适合快速实现基础圆角效果。
通过CSS类选择器控制圆角（推荐）
若多个图片需要统一的圆角样式,建议使用CSS类选择器，便于复用和维护，在<head>标签中添加<style>定义样式，或在外部CSS文件中引入：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">圆角图片示例</title>
<style>
.rounded-img {
border-radius: 20px; /* 统一圆角半径 */
max-width: 100%; /* 响应式：图片宽度不超过父容器 */
height: auto; /* 保持宽高比 */
transition: transform 0.3s ease; /* 添加过渡效果 */
}
.rounded-img:hover {
transform: scale(1.05); /* 鼠标悬停时轻微放大 */
}
</style>
</head>
<body>
<h1>产品展示</h1>
<img src="product1.jpg" alt="产品1" class="rounded-img">
<img src="product2.jpg" alt="产品2" class="rounded-img">
</body>
</html>
优势：通过类名.rounded-img复用样式，修改圆角半径只需调整CSS中的border-radius值，无需逐个修改图片标签，添加过渡效果和悬停交互可以提升用户体验。
特殊圆角：圆形图片（头像场景）
当图片为正方形时,设置border-radius: 50%可将其变为圆形，常见于头像、图标等场景：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
.avatar {
width: 80px; /* 固定宽度 */
height: 80px; /* 固定高度（需与宽度相等） */
border-radius: 50%; /* 50%圆角 */
object-fit: cover; /* 防止图片变形（如图片非正方形） */
border: 3px solid #fff; /* 添加白色边框增强视觉效果 */
box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* 添加阴影效果 */
}
</style>
</head>
<body>
<img src="user-avatar.jpg" alt="用户头像" class="avatar">
</body>
</html>
关键点：
- 必须设置
width和height且值相等（否则会变成椭圆）； object-fit: cover确保图片填满容器，避免因原始图片尺寸不匹配导致的变形；- 可以添加边框和阴影效果,增强视觉层次感。
