HTML设置不同图片圆角问题求助：自定义类未生效如何解决？

当然可以给不同图片配置不同样式，你的代码里有几个关键问题导致样式不生效，直接看修正后的写法：

错误点说明 #

• HTML结构违规：一个HTML文档只能有一个<head>和一个<body>，你写了两组，浏览器解析会出错，必须合并。
• CSS类选择器写错：你写的img1 { ... }是在找名为<img1>的标签，而你要选的是class为img1的图片，正确写法是.img1 { ... }（类选择器前必须加英文点）。
• 冗余代码：重复的<meta>标签可以只保留一个。

修正后的完整代码 #

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* 全局图片基础样式 */
img {
  border-radius: 0%;
}
/* 自定义圆形图片样式 */
.img1 {
  border-radius: 50%;
}
</style>
</head>
<body>

<h2>Rounded Images</h2>
<!-- 应用全局样式的图片 -->
<img src="img_avatar.png" alt="Avatar" style="width:200px">

<h2>Rounded Images</h2>
<!-- 应用自定义圆形样式的图片 -->
<img src="img_avatar.png" class="img1" alt="Avatar" style="width:200px">

</body>
</html>

这样修改后，第二张图片会变成圆形，第一张保持直角，完美实现不同图片的差异化样式。另外如果要给更多图片加不同样式，只要新增类似.img2 { ... }的类选择器，然后给对应图片加上class="img2"即可。

内容的提问来源于stack exchange，提问作者RADical