无法弄清楚为什么 border-radius css 无法正常工作

如何解决无法弄清楚为什么 border-radius css 无法正常工作

我正在处理一个包含各种复杂 div 的 squarespace 网站，但我无法让 border-radius 正常工作。我一直在阅读各种主题，关于是将 border-radius 属性放在 img 还是 containing div 上的回答褒贬不一。这是我在 img 上的当前代码：

#block-yui_3_17_2_1_1613415096810_5619 img {
    display: block;
    width: 200px;
    height: 200px;
    object-fit: cover;
    border-radius: 50%;
}

<div class="sqs-block image-block sqs-block-image sqs-text-ready" data-block-type="5" id="block-yui_3_17_2_1_1613415096810_5619"><div class="sqs-block-content" id="yui_3_17_2_1_1613585600072_388">
    <div class="
          image-block-outer-wrapper
          layout-caption-below
          design-layout-inline
          combination-animation-none
          individual-animation-none
          individual-text-animation-none
        " data-test="image-block-inline-outer-wrapper" id="yui_3_17_2_1_1613585600072_387">
        <figure class="
              sqs-block-image-figure
              intrinsic
            " style="max-width:2500px;" id="yui_3_17_2_1_1613585600072_386">
          <div style="padding-bottom: 56.24%; overflow: hidden;" class="
                image-block-wrapper
                has-aspect-ratio
              " data-animation-role="image" id="yui_3_17_2_1_1613585600072_385">
            <noscript><img src="https://static1.squarespace.com/static/57f18cc8be659461b9d2a9ea/t/602ac5c3963d57265116477e/1613415902093/P1890464+%281%29.jpg" alt="P1890464 (1).jpg" /></noscript><img class="thumb-image loaded" data-src="https://static1.squarespace.com/static/57f18cc8be659461b9d2a9ea/t/602ac5c3963d57265116477e/1613415902093/P1890464+%281%29.jpg" data-image="https://static1.squarespace.com/static/57f18cc8be659461b9d2a9ea/t/602ac5c3963d57265116477e/1613415902093/P1890464+%281%29.jpg" data-image-dimensions="2500x1406" data-image-focal-point="0.5,0.5" data-load="false" data-image-id="602ac5c3963d57265116477e" data-type="image" style="left: -0.0220265%; top: 0%; width: 100.044%; height: 100%; position: absolute;" alt="P1890464 (1).jpg" data-image-resolution="2500w" src="https://static1.squarespace.com/static/57f18cc8be659461b9d2a9ea/t/602ac5c3963d57265116477e/1613415902093/P1890464+%281%29.jpg?format=2500w">
          </div>
        </figure>
    </div>
</div></div>

我是一个 css 新手，我真的不知道在哪里放置 border-radius 属性。以下是此项目顶级元素的一般流程：

div > div > div > figure > div > img

这是我的图像：

它显示为一个椭圆。我试图使它成为一个完美的圆圈，并将图像裁剪为合适的尺寸。我想可能是因为图像的纵横比。

如果有人有任何想法，我将不胜感激。

编辑：这里是 IMG 元素的代码

<img class="thumb-image loaded" data-src="https://static1.squarespace.com/static/57f18cc8be659461b9d2a9ea/t/602ac5c3963d57265116477e/1613415902093/P1890464+%281%29.jpg" data-image="https://static1.squarespace.com/static/57f18cc8be659461b9d2a9ea/t/602ac5c3963d57265116477e/1613415902093/P1890464+%281%29.jpg" data-image-dimensions="2500x1406" data-image-focal-point="0.5,0.5" data-load="false" data-image-id="602ac5c3963d57265116477e" data-type="image" style="left: -0.0220265%; top: 0%; width: 100.044%; height: 100%; position: absolute;" alt="P1890464 (1).jpg" data-image-resolution="2500w" src="https://static1.squarespace.com/static/57f18cc8be659461b9d2a9ea/t/602ac5c3963d57265116477e/1613415902093/P1890464+%281%29.jpg?format=2500w">

解决方法

问题是，您的图像具有内联样式：

<img style="left: -0.0220265%; 
            top: 0%; 
            width: 100.044%; 
            height: 100%; 
            position: absolute;">

inline-style 始终比 css-style 具有更高的优先级，因此会覆盖您的 css。删除高度和宽度属性和值，问题将得到修复：

#block-yui_3_17_2_1_1613415096810_5619 img {
  display: block;
  width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius: 50%;
  object-position: 40% 50%;
}

<div class="sqs-block image-block sqs-block-image sqs-text-ready" data-block-type="5" id="block-yui_3_17_2_1_1613415096810_5619">
  <div class="sqs-block-content" id="yui_3_17_2_1_1613585600072_388">
    <div class="
          image-block-outer-wrapper
          layout-caption-below
          design-layout-inline
          combination-animation-none
          individual-animation-none
          individual-text-animation-none
        " data-test="image-block-inline-outer-wrapper" id="yui_3_17_2_1_1613585600072_387">
      <figure class="
              sqs-block-image-figure
              intrinsic
            " style="max-width:2500px;" id="yui_3_17_2_1_1613585600072_386">
        <div style="padding-bottom: 56.24%; overflow: hidden;" class="
                image-block-wrapper
                has-aspect-ratio
              " data-animation-role="image" id="yui_3_17_2_1_1613585600072_385">
          <noscript><img src="https://static1.squarespace.com/static/57f18cc8be659461b9d2a9ea/t/602ac5c3963d57265116477e/1613415902093/P1890464+%281%29.jpg" alt="P1890464 (1).jpg" /></noscript><img class="thumb-image loaded" data-src="https://static1.squarespace.com/static/57f18cc8be659461b9d2a9ea/t/602ac5c3963d57265116477e/1613415902093/P1890464+%281%29.jpg"
            data-image="https://static1.squarespace.com/static/57f18cc8be659461b9d2a9ea/t/602ac5c3963d57265116477e/1613415902093/P1890464+%281%29.jpg" data-image-dimensions="2500x1406" data-image-focal-point="0.5,0.5" data-load="false" data-image-id="602ac5c3963d57265116477e"
            data-type="image" style="left: -0.0220265%; top: 0%; position: absolute;" alt="P1890464 (1).jpg" data-image-resolution="2500w" src="https://static1.squarespace.com/static/57f18cc8be659461b9d2a9ea/t/602ac5c3963d57265116477e/1613415902093/P1890464+%281%29.jpg?format=2500w">
        </div>
      </figure>
    </div>
  </div>
</div>

或者，您可以将 !important 添加到 css-style 高度和宽度值以赋予其最高优先级并覆盖 inline style，如下例所示：

#block-yui_3_17_2_1_1613415096810_5619 img {
  display: block;
  width: 200px !important;
  height: 200px !important;
  object-fit: cover;
  border-radius: 50%;
  object-position: 40% 50%;
}

<div class="sqs-block image-block sqs-block-image sqs-text-ready" data-block-type="5" id="block-yui_3_17_2_1_1613415096810_5619">
  <div class="sqs-block-content" id="yui_3_17_2_1_1613585600072_388">
    <div class="
          image-block-outer-wrapper
          layout-caption-below
          design-layout-inline
          combination-animation-none
          individual-animation-none
          individual-text-animation-none
        " data-test="image-block-inline-outer-wrapper" id="yui_3_17_2_1_1613585600072_387">
      <figure class="
              sqs-block-image-figure
              intrinsic
            " style="max-width:2500px;" id="yui_3_17_2_1_1613585600072_386">
        <div style="padding-bottom: 56.24%; overflow: hidden;" class="
                image-block-wrapper
                has-aspect-ratio
              " data-animation-role="image" id="yui_3_17_2_1_1613585600072_385">
          <noscript><img src="https://static1.squarespace.com/static/57f18cc8be659461b9d2a9ea/t/602ac5c3963d57265116477e/1613415902093/P1890464+%281%29.jpg" alt="P1890464 (1).jpg" /></noscript><img class="thumb-image loaded" data-src="https://static1.squarespace.com/static/57f18cc8be659461b9d2a9ea/t/602ac5c3963d57265116477e/1613415902093/P1890464+%281%29.jpg"
            data-image="https://static1.squarespace.com/static/57f18cc8be659461b9d2a9ea/t/602ac5c3963d57265116477e/1613415902093/P1890464+%281%29.jpg" data-image-dimensions="2500x1406" data-image-focal-point="0.5,0.5" data-load="false" data-image-id="602ac5c3963d57265116477e"
            data-type="image" style="left: -0.0220265%; top: 0%; width: 100.044%; height: 100%; position: absolute;" alt="P1890464 (1).jpg" data-image-resolution="2500w" src="https://static1.squarespace.com/static/57f18cc8be659461b9d2a9ea/t/602ac5c3963d57265116477e/1613415902093/P1890464+%281%29.jpg?format=2500w">
        </div>
      </figure>
    </div>
  </div>
</div>

编辑：按照评论部分的要求，将 object-position: 40% 50%; 添加到图像中的“中心”人物。

,

你没有正确使用img标签，你应该在HTML中做如下

#img img {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  object-fit: cover;
}

<div id="img">
      <div>
        <div>
          <figure>
            <img src="https://static1.squarespace.com/static/57f18cc8be659461b9d2a9ea/t/602ac5c3963d57265116477e/1613415902093/P1890464+%281%29.jpg?format=2500w">
          </figure>
        </div>
      </div>
</div>

,

要使其成为完美的圆形，您需要将图像设为正方形。我看到您正试图通过设置 width 和 height 属性来做到这一点，但它们不起作用。这可能是由于 object-fit: cover; 属性所致。

尝试将其取出，它可能会修复它。