html - IE 的 CSS 剪辑路径替换

Question

有谁知道我可以使用 CSS 属性来实现与 clip-path 相同的结果来围绕 div 制作圆形形状？我的网站需要与最新版本的 IE 兼容，但我在 www.caniuse.com 上查过，IE 11 不支持 clip-path。

这就是我想要做的:

我当前的代码如您在此代码笔中所见:https://codepen.io/CodingGilbert/pen/BqwoGm?editors=1100

问题是，这段代码在 IE 中无法运行，我该如何解决？肯定有另一个 CSS 属性做同样的事情。

.card {
  width: 80%;
  height: 16.5rem;
  border-radius: 5px;
  background-color: #fff;
  text-align: center;
  padding: 0 1.5rem; 
  margin:10rem auto;
}

  .card__inner-wrapper {
    height: 55%;
    position: relative;
    margin: 0 auto;
    display: flex;
    justify-content: center; }
  .card__img {
    height: 100%;
    position: absolute;
    bottom: 50%;
    clip-path: circle(50% at 50% 50%);
    background-color: #fff;
    border: 0.8rem solid #fff; }
  .card__text-content {
    position: absolute;
    top: 6rem; }
  .card__heading {
    font-size: 1.8rem;
    font-weight: 500;
    color: #5fc0c3;
    margin-bottom: 1.5rem; }

Answer 1

在这种情况下，border-radius: 50%;在 .card__img 上会得到相同的结果，并且它与 IE9 及更高版本兼容。

演示:

body {
  background-color: gray;
}

.card {
  width: 80%;
  height: 16.5rem;
  border-radius: 5px;
  background-color: #fff;
  text-align: center;
  padding: 0 1.5rem;
  margin: 10rem auto;
}

.card__inner-wrapper {
  height: 55%;
  position: relative;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}

.card__img {
  height: 100%;
  position: absolute;
  bottom: 50%;
  border-radius: 50%; /* instead of clip-path */
  background-color: #fff;
  border: 0.8rem solid #fff;
}

.card__text-content {
  position: absolute;
  top: 6rem;
}

.card__heading {
  font-size: 1.8rem;
  font-weight: 500;
  color: #5fc0c3;
  margin-bottom: 1.5rem;
}

<div class="card">
  <div class="card__inner-wrapper">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/84/Light_bulb_icon_red.svg/2000px-Light_bulb_icon_red.svg.png" alt="Bulb icon" class="card__img">
    <div class="card__text-content">
      <h4 class="card__heading">We help charities</h4>
      <p>Share knowledge and working practice to make the best technology choices.</p>
    </div>
  </div>
</div>