📅 最后修改于: 2023-12-03 14:50:33.994000 🧑 作者: Mango
当我们尝试为原生图像元素添加边框时，我们通常会使用 border 属性。而当我们想要给边框设置圆角时，我们可以使用 border-radius 属性。但是在某些情况下，这个属性可能不起作用，即使我们已经正确设置了它。
这种情况通常出现在当我们在CSS中为图像元素添加 display: block 属性时。这是因为图像元素默认的 display 属性是 inline，并且 border-radius 对于 inline 元素不起作用。
解决这个问题的方法是将 display 属性设置为 inline-block 或 block。这将使 border-radius 属性起作用并且可以成功地添加圆角边框。
以下是一个简单的例子，展示如何将 display 属性设置为 inline-block，以使 border-radius 属性起作用：
<!DOCTYPE html>
<html>
<head>
<title>Image with rounded corners</title>
<style>
img {
display: inline-block;
border-radius: 50%;
border: 5px solid red;
padding: 10px;
}
</style>
</head>
<body>
<img src="https://via.placeholder.com/150" alt="example image">
</body>
</html>
在上面的示例中，我们使用了 border-radius 属性来创建一个圆形边框。我们还将 display 属性设置为 inline-block，以使 border-radius 起作用。最后，我们将 border 属性设置为 5px solid red，以创建一个红色边框，并添加了一些内边距（padding）以使图像居中显示。
总之，当我们在JavaScript中使用原生图像元素时，我们在添加 border 和 border-radius 样式时可能会遇到问题。解决方法是设置 display 属性为 inline-block 或 block，以便使 border-radius 正确工作。