Question

我有一个我用于网站顶部的图片，它目前是一个正方形，但我希望它是圆形的。我创建了一个CSS类，但图像不会响应它。我正确地链接了图像（它出现在网站中，并响应HTML;我的CSS也链接并适用于除图像之外的所有内容。）HTML和CSS都验证，我找不到解决方案。

.circular {
  border-radius: 50%;
}

<img class="circular" src="http://placehold.it/200x200" alt="placeholder image" title="placeholder image" height="200" width="200">

我也尝试将我的CSS编写为img.circular{ border-radius: 50%;}，但由于某种原因这不起作用。

Answer 1

有时你必须刷新你的css文件.. 如果你看源是可见的条目吗？

Answer 2

试试这个：右键点击Chrome中的图片，然后选择“检查”。然后应该打开Chrome开发者工具。您应自动选择img元素。

从这里开始，使用＆＃39;样式＆＃39;和＆＃39;计算＆＃39;选项卡，您可以检查有问题的元素当前活动的样式。然后，您可以验证您的样式是否存在，并查看是否有其他样式覆盖它们。 E.g。

#somethingElse .circular{
    border-radius: 0%;
}

.circular {
    border-radius: 50%;//this will have no effect due to selector weighting
}

此外

.circular {
    border-radius: 50%;
}

.circular {
    border-radius: 0%;//this will overwrite the earlier property
}

Answer 3

当您在本地更改静态站点文件时，最好在浏览器中禁用缓存。

按 Ctrl + Shift + i 打开开发人员工具，导航至网络标签，然后选择停用缓存。

只要开发者工具处于打开状态，缓存就会被禁用。

在编辑器中保存更改后，不要忘记在浏览器中刷新页面。

Answer 4

这似乎有效。你有什么问题？

＆＃13;

.circular {
  border-radius: 50%;
}

＆＃13;

<img class="circular" src="https://i.imgur.com/KyrfT4U.jpg" alt="placeholder image" title="placeholder image" height="200" width="200">

＆＃13;