一、box-shadow

<div data-title="使用box-shadow裁剪聚焦区域">
    <div>
        <img src="https://static.yangzw.vip/codepen/gz.jpg">
        <i></i>
    </div>
</div>

<style>
  .img-cliper {
    overflow: hidden;
    position: relative;
    img {
        width: 400px;
    }
    i {
        position: absolute;
        left: 50px;
        top: 30px;
        border-radius: ;
        width: 100px;
        height: 50px;
        box-shadow: 0 0 0 9999px #a2fc4b;
        opacity:.5;//不使用rgba兼容部分安卓手机
    }
  }
</style>

引用文章

二、使用border 进行四条边处理