无法弄清楚为什么 border-radius css 无法正常工作
Can't figure out why border-radius css isn't working properly
我正在处理一个带有各种错综复杂的 div 的方形空间网站,但我无法 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 的新手,我真的不知道在哪里放置边界半径 属性。这是此项目的顶级元素的一般流程:
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">
要使其成为完美的圆形,您需要将图像设为正方形。我看到您正试图通过设置 width
和 height
属性来做到这一点,但它们不起作用。这可能是由于 object-fit: cover;
属性.
尝试将其取出,它可能会修复它。
你没有正确使用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>
问题是,您的图像具有内联样式:
<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%;
添加到图像中的“中心”人物。
我正在处理一个带有各种错综复杂的 div 的方形空间网站,但我无法 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 的新手,我真的不知道在哪里放置边界半径 属性。这是此项目的顶级元素的一般流程:
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">
要使其成为完美的圆形,您需要将图像设为正方形。我看到您正试图通过设置 width
和 height
属性来做到这一点,但它们不起作用。这可能是由于 object-fit: cover;
属性.
尝试将其取出,它可能会修复它。
你没有正确使用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>
问题是,您的图像具有内联样式:
<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%;
添加到图像中的“中心”人物。