css加背景模糊之后如何让边缘不模糊？

Question

.video_bg{
      content: "";
      width:38.1vw;
      .height(50);
      position:absolute;
      top:0;
      left:0;
      //background:url(https://assets.dspunion.com/cdn-adn/v2/offersync/19/02/21/11/17/5c6e1851cf6fb.jpg) no-repeat 100% 100%;
      background:url(https://assets.dspunion.com/cdn-adn/v2/offersync/19/02/21/11/17/5c6e18661de66.jpg) no-repeat center center;
      background-size:cover;
      -webkit-filter: blur(5px);
      -moz-filter: blur(5px);
      -o-filter: blur(5px);
      -ms-filter: blur(5px);
      filter: blur(5px);
      z-index: 1;
    }

设计背景图片，产品设计图是模糊的背景图片，我使用filter之后，设计反应边缘不可以模糊，有没有好的办法可以解决这个问题？我试过了：after加模糊效果是一样的，都会边缘模糊。

这是我的效果。设计效果图是下面这样：

Answer 1

filter: drop-shadow或者box-shadow属性试一下

Answer 2

跟图没关系，你的css哪里设置有问题，写个demo看一下

Answer 3

目前已解决，通过：：before设置模糊，给本身设置模糊的图片容器加overflow:hidden;还有一种方法，给旁边的元素加个白色背景色，并加relative定位。
代码如下：

.video_bg{
      content: "";
      width:38.1vw;
      .height(50);
      position:absolute;
      top:0;
      left:0;
      overflow: hidden;
      &:before{
        position: absolute;
        background:url(661de66.jpg) no-repeat center center;
        background-size:cover;
        -webkit-filter: blur(5px);
        -moz-filter: blur(5px);
        -o-filter: blur(5px);
        -ms-filter: blur(5px);
        filter: blur(5px);
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        content: '';
      }
    }