mask-image使用CSS渐变图像遮罩曲面效果实例页面

展示

代码

• HTML：

  <img src="1.jpg" class="mask-image" width="256" height="192">

• CSS：

  .mask-image {
      --gradient1: radial-gradient(600px 80px at top, transparent 150px, black 152px 1000px, transparent 0);
      --gradient2: radial-gradient(600px 80px at bottom, transparent 150px, black 152px 1000px, transparent 0);
      -webkit-mask-image: var(--gradient1), var(--gradient2);
      mask-image: var(--gradient1), var(--gradient2);
  }