如何使用 CSS 为 DIV 创建弧形底部？

使用 CSS 将 DIV 的底部向内弯曲

要实现如图所示的弯曲底部效果，一种技术涉及使用 border-radius 和具体值。实现方法如下：

.curved {
  margin: 0 auto;
  height: 400px;
  background: lightblue;
  border-radius: 0 0 200px 200px;
}

此代码创建一个底部边缘为圆角的矩形 DIV，如图所示：

透明曲线

或者，可以采用径向渐变来创建透明曲线：

body {
  background: pink;
}

.container {
  margin: 0 auto;
  width: 500px;
  height: 200px;
  background: radial-gradient(110% 50% at bottom, transparent 50%, lightblue 51%);
}

<div class="container"></div>

此方法会产生具有弯曲底部的半透明蓝色形状。

以上是如何使用 CSS 为 DIV 创建弧形底部？的详细内容。更多信息请关注PHP中文网其他相关文章！