CSS - 元素自定义半径？

Question

我正在尝试添加自定义边框半径，就像这张主图:https://www.magicleap.com/magic-leap-one

我知道是图像做的，我的问题是我可以使用 CSS 做类似的事情吗？

Answer 1

试试这个。希望这就是您要找的。

body {
  margin: 0;
  padding: 0;
}

.block {
  background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)), url(https://s1.kkday.com/images/product/8163/20170301045421_Nkoag.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  color: #fff;
  width: 100%;
  padding: 150px 0;
  text-align: center;
  border-bottom-left-radius: 100% 15%;
  border-bottom-right-radius: 100% 15%;
}

<div class="block">
  <h1>
    Hello World!
  </h1>
</div>