在前端开发中，图片圆角效果是常见的设计要求之一。而实现图片圆角效果的方式有很多种，其中一种比较简单的方式是利用 CSS Reset。
什么是 CSS Reset？
CSS Reset 是一种用于重置浏览器默认样式的 CSS 文件。由于不同浏览器对于 HTML 标签的默认样式不同，使用 CSS Reset 可以让我们在不同浏览器下保持一致的样式。
利用 CSS Reset 实现图片圆角效果
利用 CSS Reset 实现图片圆角效果的思路是：首先重置图片的默认样式，然后通过 CSS 设置图片圆角样式。
1. 重置图片默认样式
在 CSS Reset 文件中，我们需要重置图片的默认样式，以便我们可以自定义图片的样式。下面是一个简单的 CSS Reset 文件：
// javascriptcn.com 代码示例
/* Reset default browser styles */
* {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* Reset image styles */
img {
display: block;
width: 100%;
height: auto;
}在上面的 CSS Reset 文件中，我们将图片的默认样式设置为了：
display: block：使图片以块级元素显示，避免与其他元素重叠。width: 100%：使图片宽度自适应父元素，以充分利用空间。height: auto：使图片高度根据宽度自适应，避免图片变形。
2. 设置图片圆角样式
在重置图片默认样式之后，我们可以通过 CSS 设置图片圆角样式。下面是一个简单的示例代码：
/* Set image border radius */
img.rounded {
border-radius: 50%;
}在上面的示例代码中，我们通过 border-radius 属性设置了图片圆角样式。其中，50% 表示圆形。
3. 完整示例代码
下面是一个完整的示例代码，包含了 CSS Reset 文件和设置图片圆角样式的代码：
// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Image Rounded</title>
<style>
/* Reset default browser styles */
* {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* Reset image styles */
img {
display: block;
width: 100%;
height: auto;
}
/* Set image border radius */
img.rounded {
border-radius: 50%;
}
</style>
</head>
<body>
<img class="rounded" src="https://picsum.photos/200">
</body>
</html>在上面的示例代码中，我们使用了 border-radius: 50% 将图片设置为圆形。
总结
利用 CSS Reset 实现图片圆角效果是一种简单而实用的方式。通过重置图片默认样式和设置圆角样式，我们可以轻松地实现图片圆角效果。同时，CSS Reset 还可以用于重置其他 HTML 标签的默认样式，让我们更好地控制网页的样式。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/657f5719d2f5e1655da33d32