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>

CSS-元素自定义半径？

1 个答案: