html - 边界半径 : 50% for rounded image crossed out in console

Question

我正在按照标准程序在 ReactJS 中创建圆形图像。

.about-profile {
    display: block;
    width: 260px;
    height: 260px;
    border-radius: 50%;
}

<img className="about-profile" src="./images/profile.jpg"/>

为什么在这种情况下没有应用 border-radius: 50%？

Answer 1

这就是 CSS 中的 级联。其他一些规则正在覆盖您的边界半径。

有关详细信息，请参阅 https://www.w3.org/TR/2011/REC-CSS2-20110607/cascade.html#cascade

您可以做的是将 .about-profile 更改为更“具体”，或者使用 !important 覆盖其他规则。我建议前者。