如何制作圆形或自定义边框半径css [重复]答案

【问题标题】：how to make rounded or custom border radius css [duplicate]如何制作圆形或自定义边框半径css [重复]
【发布时间】：2022-01-21 19:46:27
【问题描述】：

我在搜索网站参考资料时发现了一个带有很酷的图片标题的网站。这是来自网站的图片标题

它在左下角和右下角都有边框半径，所以让图像看起来很酷。我试过使用border-bottom-left-radius和border-bottom-right-radius。但它看起来不一样。这是我尝试过的代码

#image-header{
   height:100px;
   width:500px;
   border-bottom-left-radius: 2rem;
   border-bottom-right-radius: 2rem;
   background:green;
}

我只能使用 CSS 来实现吗？

【问题讨论】：

标签： css

【解决方案1】：

你可以这样做：

#image-header {
  height: 100px;
  width: 500px;
  background: green;
  border-radius: 60% / 20%;
  border-top-right-radius: 0px;
  border-top-left-radius: 0px;
}

&lt;div id="image-header"&gt;&lt;/div&gt;

尝试调整border-radius 属性中的百分比值，直到获得所需的结果。

【讨论】：

哇，谢谢，这就是我要找的。谢谢你
很高兴为您提供帮助 =)

【解决方案2】：

您可以在标题框下方添加一个分隔线，并将边框半径添加到该分隔线：

.header {
  padding: 10px;
  background: #efefef;
}

.header-bottom {
  border-radius: 0 0 100% 100%;
  height: 50px;
  width: 100%;
  background: #efefef;
}

<div class="header">
  <h1>Header title</h1>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh</p>
</div>

<div class="header-bottom"></div>

【讨论】：