在HTML中，给图片添加样式主要有两种方法：使用内联样式和使用外部或内部CSS样式表，本文将详细介绍这两种方法，并提供相应的示例代码。
内联样式
内联样式是直接在HTML标签中使用style属性来设置样式，这种方法的优点是简单易行，但缺点是难以维护，尤其是当一个样式被多个元素共享时，以下是一个使用内联样式给图片添加样式的例子：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <img src="example.jpg" alt="示例图片" style="width: 300px; height: 200px; border: 5px solid #333;"> </body> </html>
在这个例子中，我们通过style属性设置了图片的宽度、高度和边框样式。
外部或内部CSS样式表
使用外部或内部CSS样式表可以更好地组织和管理样式，这种方法的优点是样式可以重用，便于维护，以下是一个使用内部CSS样式表给图片添加样式的例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.example-image {
width: 300px;
height: 200px;
border: 5px solid #333;
}
</style>
</head>
<body>
<img src="example.jpg" alt="示例图片" class="example-image">
</body>
</html>
在这个例子中，我们首先在<head>标签内定义了一个CSS类（.example-image），然后通过class属性将这个类应用到<img>标签上。
常见问题与解答
Q1: 如何设置图片的响应式尺寸？
A1: 可以使用CSS的max-width和height属性来设置图片的最大宽度和高度，同时将图片的宽度和高度设置为auto，这样图片就可以根据屏幕大小自动缩放了。
.example-image {
max-width: 100%;
height: auto;
}
Q2: 如何实现图片的圆角效果？
A2: 可以使用CSS的border-radius属性来设置图片的圆角效果。
.example-image {
border-radius: 20px;
}
Q3: 如何实现图片的阴影效果？
A3: 可以使用CSS的box-shadow属性来设置图片的阴影效果。
.example-image {
box-shadow: 5px 5px 10px #888;
}
以上就是关于在HTML中给图片添加样式的详细介绍，希望本文能帮助您更好地理解和应用这两种方法。