html - 如何在不更改其他图像的情况下更改侧边栏图像的边框半径？

Question

我只是在主页的“关于我”部分放置了一张图片，并且在所有其他图片都发生变化的情况下无法更改图片的边框半径..

CSS:

.well .col-lg-12 .about, img {
  border-radius: 50%;
}

HTML:

<div class="well">
<div class="row">
  <div class="col-lg-12">
    <img class="about" src= "https://storage.googleapis.com/simply-sturgis-website-files/Untitled.jpg" style="width:230px"></img>
    <h3>Hello! I'm Jennifer.</h3>
    <p>I'm a part time marketing assistant, part time blogger, who loves food, beauty, and fashion. But what 23 year old doesn't?!</p>
    <a href="#">Read More</a>
  </div>
</div>

Demo

这是我目前拥有的代码的结果:

Answer 1

您应该考虑一些错误。

不要为 ID 添加样式 - ID 不能级联并且它们是唯一的。这意味着如果您想分享您的样式，您不能，因为您将它附加到一个 ID 而不是一个您可以重用的类。

例如:您不能有两个 ID 为 about 的 DIV。但是，如果您希望两个 DIV 以相同的方式运行，那么现在您将不得不为两个 DIV 重复 CSS 规则。相反，您创建一个 myClass，为其设置样式，然后在任何您想要的地方重复该类。 --- 可扩展性和可维护性

不要设置 BOOTSTRAP 类的样式 - 某些 Bootstrap 类，特别是 col-* 类，不应根据您的具体情况设置样式或考虑。这会产生一个问题，因为您的样式只有在您希望它为 col-lg-12 时才会有效。如果您决定更改类以使其响应，那么您的特异性就失败了。而是级联自定义类并将其用作您的特殊性的 Hook 。

例如，您设置了您的特异性 .col-lg-3 .myClass{something} 的样式，但后来决定 col-lg-3 太大了。因此，您将其更改为 col-lg-2。现在您必须转到 CSS 并将该特性更改为 .col-lg-2 .myClass{something}...双重工作。如果您将 Bootstrap 类排除在外，您只会更改 HTML 体系结构，而不会更改其他内容

如果我是你，我会这样做:

  <div class="col-lg-12 myClass">
    <img class="about" src= "https://storage.googleapis.com/simply-sturgis-website-files/Untitled.jpg" style="width:230px"></img>
    <h3>Hello! I'm Jennifer.</h3>
    <p>I'm a part time marketing assistant, part time blogger, who loves food, beauty, and fashion. But what 23 year old doesn't?!</p>
    <a href="#">Read More</a>
  </div>

还有你的 CSS

.myClass img.about {
   border-radius: 50%;
}

DEMO