então demorei um pouco para descobrir, mas depois que fiz o código, ele se tornou bastante trivial. O Design exigia uma caixa cujas bordas laterais mudavam de cor ao longo do eixo y, mas também desbotavam para transparentes cerca de 80% para baixo. Portanto, imagine uma borda fina que mudou de cor, normalmente de uma cor saturada mais escura para uma cor mais clara à medida que desce, mas também mudando a transparência para 0.
A solução foi usar vários recursos de background do CSS3. Meu projeto estava usando SASS, então abaixo está o código scss para ele. o único requisito que vi é que o elemento que usa a classe precisa ter uma altura fixa ou estar contido em outro elemento que tem uma altura fixa.
.gradiated-fading-borders {
margin-top:10px
padding:10px;
@include border-top-left-radius(9px);
@include border-top-right-radius(9px);
border:1px solid #B5C5D7;
border-width:1px 0 0;
background-color:#f6f6f6;
@include filter-gradient(#f6f6f6, #FFF, vertical);
@include background(
linear-gradient(left top, rgba(181, 197, 215, 0.75),#FFF 78%),
linear-gradient(center top, #e3e3e3 0%, rgba(239, 238, 238, 0.81) 3%, #f6f6f6 58%, #FFF 84%),
linear-gradient(right top,rgba(181, 197, 215, 0.75),#FFF 78%)
);
background-position:left top, center top, right top;
background-size:1px 80%,99.85% 100%, 1px 80%;
background-repeat:no-repeat, no-repeat, no-repeat;
};Aqui está uma imagem do resultado, mascarei o interior como sua informação privada. O que você pode ver sorta é o canto superior arredondado com um forte couro cabeludo e conforme ele desce, o contorno muda de cor e se torna transparente, da mesma forma o gradiente de cinza do fundo também está mudando conforme se move para baixo, tornando-se 100% transparente um pouco mais abaixo de onde o a linha do cabelo desapareceu.
