css - 如何用css制作弯曲的边框？

Question

我希望有人能帮助我。我找到了很多关于边界半径信息的页面，但我不需要这种边界。可以用css吗？

提前致谢。

Answer 1

你可以用 box-shadow 做到这一点。如果您为元素设置颜色并将 box-shadow 用作白色，它看起来就像边框一样，您可以很容易地使用它。

.slider {
  height: 500px;
  background: grey;
}
.slider .slide {
  height: 200px;  
  background-color: white;
  border-radius: 100%/0 0 300px 30px;
  box-shadow: 0px 44px 0px white;
}

<div class="slider">
  <div class="slide">
    Some content
  </div>
</div>