时间戳

首页 > 解决方案 > IE 的 CSS 剪辑路径替换

html - IE 的 CSS 剪辑路径替换

问题描述

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

这就是我想要做的： 在此处输入图像描述

我当前的代码可以在这个 codepen 中看到：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; }

标签： htmlcssinternet-explorer

解决方案

在这种情况下，border-radius: 50%;on.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>

推荐阅读