边界半径只圆一个角答案

【问题标题】：border-radius is only rounding one corner边界半径只圆一个角
【发布时间】：2022-11-10 16:20:32
【问题描述】：

border-radius css 命令似乎并不适用于所有角落。 html:

<img style="object-position: -200px -100px;" 
    id="wlimage"
    <!--this is the image giving me problems--> src="https://www.worldatlas.com/r/w1200/upload/56/a1/a7/shutterstock- 
424782349.jpg">

css

#wlimage {
border-radius: 30px;
width: 50%;
height: 50%;
}

【问题讨论】：

您的 HTML 代码无效，缺少很多结束标签
关于边界半径问题，这是由于您的 object-position: -200px -100px; 设置，它隐藏了图像的主要部分。

标签： html css image rounded-corners border-radius

【解决方案1】：

问题是您的object-position 样式会在img 框架内移动图像。框架是圆形的，但您看到的是图片本身的（方形）边缘。

我添加了一个红色边框，以便您可以看到<img> 元素的边界与图片边缘的位置。

#wlimage {
  border-radius: 30px;
  border: 4px solid red; 
}

<img style="object-position: -200px -100px;" 
  id="wlimage"
  src="https://www.worldatlas.com/r/w1200/upload/56/a1/a7/shutterstock-424782349.jpg">

【讨论】：

【解决方案2】：

我通过将object-position 更改为position 来修复它。

【讨论】：