部分透明的遮罩层处理

效果：

思路：把白色区域看成一个div，阴影部分看成border进行处理

// css部分代码
   // 透明部分的大小即为该div的大小，利用border的宽度加上opacity实现遮罩层
  .visible-shouru{
    position: absolute;
    top: 400rpx;
    left: 576rpx;
    z-index: 100;
    width: 148rpx;
    height: 148rpx;
    border: 1 solid #000;
    opacity: .6;
    box-shadow: 0 0 0 1000rpx #000;
  }
  // 该部分是利用伪类为空白部分加上圆角等效果
  .visible-shouru::before{
    content: '';
    width: 148rpx;
    height: 148rpx;
    border-radius: 10rpx;
    position: absolute;
    left: 0rpx;
    top: 0rpx;
    box-shadow: 0 0 0 10rpx #000;
  }
   // 以下为遮罩层上的图文说明部分
  .shouru{
    width: 100%;
    position: absolute;
    top: 310rpx;
    z-index: 119;
    .sr-arrow{
        width: 36rpx;
        height: 52rpx;
        position: absolute;
        top: 15rpx;
        right: 75rpx;
    }
    .sr-txt{
        position: absolute;
        top: -35rpx;
        right: 55rpx;
        width: 180rpx;
        height: 40rpx;
    }
  }

参考文章：https://www.cnblogs.com/zhuzhenzhen/p/5273946.html