Можно ли сделать полупрозрачную границу у слоя?

Question

[Multigame]

Добрый день!

Можно ли сделать у элемента полупрозрачную размытую границу? т.е. box-shadow: inset
Но если указать rgba(255,255,255,0.5) то получим размытие из фоновой картинки в белое. А хочется из фоновой картинки в body.

Градиент, как я понимаю не пойдет, у body и div фоны - текстуры.

Answer 1

[Pretor DH]

В общем случае ставят цвет фона из body в цвет тени.

Если так непулучается (по различным причинам), то есть несколько вариантов:
- нужно заранее делать картинку с полупрозрачными краями;
- воспользоваться canvas для генерации такой картинки;
- воспользоваться серверным скриптом;
- наложить маску ( !не кросбраузерно ).

ДОПОЛНЕНО:
Коментарий натолкнул меня на мысль написать JS делающий это красиво:

function feather(mask) {
     $('img.feather').each( function(){
          var src = this.attr('src');
                mask = mask || this.data('mask') || 'http://dragon.deparadox.com/img/wual.png';
          src = 'url(data:image/svg+xml;base64,'+btoa(
'<svg width="400" height="300" baseProfile="full" version="1.2">'+
'        <defs>'+
'            <mask id="svgmask2" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse"'+ 'transform="scale(1)">'+
'                <image width="100%" height="300" xlink:href="'+mask+'" />'+
'            </mask>'+
'        </defs>'+
'        <image id="the-mask" mask="url(#svgmask2)" width="100%" height="300" y="0" x="0" xlink:href="'+src+'" />'+
'    </svg>')+')';
          this.attr('src',src);
     });
}