我正在做一个项目(我粘贴了受影响的部分),我正试图绕过图像的4个角.到目前为止,容器正在工作,但图像只有一个圆角(右下角).

提前感谢所有花时间阅读和回复的人!

.cardcontainer {
    width: 300px;
    background-color: grey;
    border-radius: 15px;
    padding-bottom: 10px;
}

.mainimage {
    width: 260px;
    padding-top: 20px;
    padding-left: 20px;
    border-radius: 8px;
}
<div class="cardcontainer">
<img class="mainimage" src="./image.jpg" alt="Image">
</div>

推荐答案

这是因为你在图像类中添加了padding-top: 20px;padding-left: 20px;.移除这些,您将在所有4个角上看到边界半径:

.cardcontainer {
  width: 300px;
  background-color: grey;
  border-radius: 15px;
  padding-bottom: 10px;
}

.mainimage {
  width: 260px;
  border-radius: 20px;
}
<div class="cardcontainer">
  <img class="mainimage" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT57B75xIfuwkTT0FO1EHI0TK65RcvXIwQ5nNoMePOy9FMxaV5FJ72u6bHLf9N8v9OcARk&usqp=CAU" alt="Image">
</div>

Html相关问答推荐

防止SVG边框半径zoom

如何使用HTML和css代码在vb.net上打印POS

具有可展开行的棱角material 表(垫子表),折叠时行之间仍有间隙

在悬停时应用文本装饰

如何突破安莉得分

我无法动态嵌入Instagram帖子,因为无法分配Instagram固定链接

有没有什么方法可以很容易地给一个SVG一个插框阴影?

HTML中的ARIA标签:在元素内部还是外部?(&Q;

为什么要添加换行符(至少在 Google Chrome 中)

:invalid Select 器的惰性判断

如何使元素具有粘性

复制两个

会产生一个空行;复制

元素不会

下划线在 Bootstrap 5 导航链接下无法正常工作

无法在 CSS 中将 h1 标签居中

CSS Grid 布局:1 大图和 3 小图

使用flex wrap时,如何设置另一个元素的宽度与换行后的元素对齐?

我可以在标签元素中使用标题元素吗?

是否有一种静态方式可以根据暗模式 Select 一张或另一张图像?

表格布局:固定;文本溢出单元格时不起作用

Bootstrap - 如何通过 3 级层次 struct 访问 1000 个项目中的一个项目?