Маска изображения, создать прямоугольник из нескольких градиентов

Question

У меня есть радиальный градиент, который используется как mask-image, "затухающий" изображение в background-color позади изображения.

mask-image: radial-gradient(ellipse at center, rgba(255,255,255,1) 1%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 70%,rgba(255,255,255,0) 100%);

Как мне получить тот же эффект с равномерно прямоугольным angular градиентом на всех четырех сторонах?

Я знаю, что вы можете комбинировать градиенты, и моя самая последняя попытка, похоже, не имеет никакого эффекта:

img
{
 mask-image: 
  linear-gradient(to top, rgba(255,255,255,1) 1%, rgba(255,255,255,1) 50%),
  linear-gradient(to right, rgba(255,255,255,1) 1%, rgba(255,255,255,1) 50%),
  linear-gradient(to bottom, rgba(255,255,255,1) 1%, rgba(255,255,255,1) 50%),
  linear-gradient(to left, rgba(255,255,255,1) 1%, rgba(255,255,255,1) 50%);
}

Answer 1

Хитрость с несколькими масками заключается в управлении размером / положением, так что каждый из них будет применяться к области вашего элемента:

.box {
  height:300px;
  width:300px;
  background: url(https://i.picsum.photos/id/1003/300/300.jpg);
  -webkit-mask: 
     linear-gradient(to top,    transparent,#fff) top   /100% 20%,
     linear-gradient(to bottom, transparent,#fff) bottom/100% 20%,
     linear-gradient(to left  , transparent,#fff) left  /20% 100%,
     linear-gradient(to right , transparent,#fff) right /20% 100%;
  -webkit-mask-repeat:no-repeat;
  
  mask: 
     linear-gradient(to top,    transparent,#fff) top   /100% 20%,
     linear-gradient(to bottom, transparent,#fff) bottom/100% 20%,
     linear-gradient(to left  , transparent,#fff) left  /20% 100%,
     linear-gradient(to right , transparent,#fff) right /20% 100%;
  mask-repeat:no-repeat;
}

body {
  background:pink;
}

<div class="box"></div>

Или вот так:

.box {
  height:300px;
  width:300px;
  background: url(https://i.picsum.photos/id/1003/300/300.jpg);
  -webkit-mask: 
    linear-gradient(to top,  transparent 10%, #fff 15% 90%, transparent 95%),
    linear-gradient(to left, transparent 10%, #fff 15% 90%, transparent 95%);
  -webkit-mask-size:110% 110%;
  -webkit-mask-position:center;
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-composite: source-in;
  
  
  mask: 
    linear-gradient(to top,  transparent 10%, #fff 15% 90%, transparent 95%),
    linear-gradient(to left, transparent 10%, #fff 15% 90%, transparent 95%);
  mask-size: 110% 110%;
  mask-position: center;
  mask-repeat:no-repeat;
  mask-composite: intersect;
}

body {
  background:pink;
}

<div class="box"></div>

Похожие: Как сделать прямоугольник angular градиент прозрачности CSS3?