如何更改边栏图像的边框半径而不更改其他图像？

Question

我刚在＆＃39;关于我＆＃39;我的主页的一部分，如果没有其他所有图像都改变，我无法改变图像的边框半径。

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为DIVs的{​​{1}}。但如果您希望两个about以相同的方式行事，那么现在您将不得不为DIVs重复CSS规则。相反，您可以创建一个DIVs，对其进行样式设置，然后根据需要随意重复该类。 ---可扩展性＆amp;可维护性

不要使用BOOTSTRAP课程 - 某些Bootstrap课程，特别是myClass课程，不应该根据您的特殊性进行设计或考虑。这会产生问题，因为只有您希望它成为col-*时，您的样式才会起作用。如果您决定更改类以使其响应，则您的特异性失败。而是级联一个自定义类，并将其用作特异性的钩子。

例如，您设定了特异性col-lg-12但稍后决定.col-lg-3 .myClass{something}太大了。因此，您将其更改为col-lg-3。现在你必须转到CSS并将其特异性更改为col-lg-2 ...双重工作。如果您将bootstrap类放在其中，则只更改HTML体系结构，而不是其他任何内容

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

.col-lg-2 .myClass{something}

你的CSS

  <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>

DEMO

Answer 2

为图像指定一个id标记，然后在CSS中使用该ID。这样，您只会定位特定图片，而不是其他图片：

https://jsfiddle.net/32nydcjw/

HTML：

 <!-- About Me Well -->
  <div class="well">
    <div class="row">
      <div class="col-lg-12">
        <img id="aboutMeImg" 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>
  </div>

CSS：

#aboutMeImg {
  border-radius: 50%;
}