选择裁剪图片区域

夜雨入心

一、box-shadow

<div class="bruce flex-ct-x" data-title="使用box-shadow裁剪聚焦区域">
    <div class="img-cliper">
        <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: 100%;
        width: 100px;
        height: 50px;
        box-shadow: 0 0 0 9999px #a2fc4b;
        opacity:.5;//不使用rgba兼容部分安卓手机
    }
  }
</style>

image.png
引用文章

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

阅读 241
34 声望
0 粉丝
0 条评论
34 声望
0 粉丝
文章目录
宣传栏