css - 如何在div的顶部和右侧添加模糊效果？

Question

我有这个 fiddle :

https://jsfiddle.net/aod4rmx8/

.background{
    position: absolute;
    left: 0;
    width:50%;
    right: 0;
    bottom: 0;
    top:0;
    background-color: #000;
    /*box-shadow: 100px 0 40px 6px rgba(0, 0, 0, 1);*/

-webkit-box-shadow: 200px 1px 300px 200px rgba(0,0,0,0.75);
-moz-box-shadow: 200px 1px 300px 200px rgba(0,0,0,0.75);
box-shadow: 200px 1px 300px 200px rgba(0,0,0,0.75);
}

我想要实现的是在黑色背景的顶部和右侧添加模糊效果。这就是我想要实现的目标:

所以我在右侧的图像上有一点点阴影，但在具有背景颜色的 div 的右侧和顶部边缘也有模糊。有什么建议吗？

Answer 1

如果我没记错的话，你是问这样的东西来添加模糊效果，

.data_protection {
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
}