纯css实现拍照取景框遮罩层

效果:

实现思路:
一开始想着应该怎么在灰色透明遮罩层里面挖一个框框出来,想了好久都没有头绪,后来换了个思路:怎么在取景框周围显示灰色透明遮罩层.这样一样瞬间就来了思路:
1.使用border实现;
2.使用box-shadow实现
使用border实现有个限制就是微信小程序border不支持rgba颜色格式,也就是不支持透明边框,所以选择使用box-shadow实现.
代码:
css

/* 取景框 */
.clip-box-xsz {
  width: 88vw;
  height: 60vw;
  position: absolute;
  top: 26.5%;
  left: 5%;
  box-shadow: 0 0 0 300px rgba(0, 0, 0, .6);
}

/* 四个白角 */
.b {
  border: 2px solid white;
  height: 20rpx;
  width: 20rpx;
  position: absolute;
}

.l-t {
  border-right: transparent;
  border-bottom: transparent;
  top: 0;
  left: 0;
}

.r-t {
  border-left: transparent;
  border-bottom: transparent;
  right: 0;
  top: 0;
}

.l-b {
  border-right: transparent;
  border-top: transparent;
  left: 0;
  bottom: 0;
}

.r-b {
  border-left: transparent;
  border-top: transparent;
  right: 0;
  bottom: 0;
}

html

 <!-- 取景框 -->
      <view class="clip-box-xsz" wx:if="{{show}}">
        <view class="b l-t"></view>
        <view class="b r-t"></view>
        <view class="b l-b"></view>
        <view class="b r-b"></view>
      </view>
     

实现拍照截取取景框内容点这里