.itv-cliper {
        background: #1c1c1c;
        position: relative;
        width: 100%;
        height: 100%;
        overflow: hidden;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        z-index: 99;
        overflow: hidden;
        *{
            box-sizing: border-box;
        }
        .itv-cliper-clipic-frame {
            background: #f2f2f2;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
          
            box-sizing: border-box;
            
            // border-radius: 50%;

            img {
                -webkit-touch-callout: none;
                pointer-events: none;
            }
        }

        .itv-cliper-front-bg{
            
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            border: #fff solid 1px;
            z-index: 10;
        } 
            

        .itv-cliper-clipic-frame-show {
            overflow: hidden;
          
        }

        .itv-cliper-clipic-layer {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background: rgba(0,0,0,.6);
            pointer-events: none;
            transform: translateZ(0);
        }


        .itv-cliper-clipic-operation-bar {
            display: flex;
            color: #f2f2f2;

            position: absolute;
            width: 100%;
            bottom: 0;
            left: 0;
            height: 44ipx;

        }

       .itv-cliper-clipic-cancel ,
       .itv-cliper-clipic-confirm
       {
           text-align: center;
           flex: 1;
           display: flex;
           justify-content: center;
           align-items: center;
       }

         .itv-cliper-circle{
             border-radius: 50%;
         }

         .itv-cliper-top-bar {
             position: absolute;
             height: 44ipx;
             left: 0;
             right: 0;
             z-index: 100;
             text-align: center;
             display: flex;
             justify-content: center;
             align-items: center;
             line-height: 0;
             color: #fff;
         }
         .itv-cliper-reload {
             position: absolute;
             height: 44ipx;
             right: 15ipx;
             top: 50%;
             font-size: 24ipx;
         }
    }

    
.left-top{
    height: 16ipx;
    width: 16ipx;
    border-left: #fff solid 4px;
    border-top: #fff solid 4px;
    position: absolute;
    top: -4ipx;
    left: -4ipx;
    z-index: 100;
}

.right-top{
    height: 16ipx;
    width: 16ipx;
    border-right: #fff solid 4px;
    border-top: #fff solid 4px;
    position: absolute;
    top: -4ipx;
    right: -4ipx;
    z-index: 100;
}


.left-bottom{
    height: 16ipx;
    width: 16ipx;
    border-left: #fff solid 4px;
    border-bottom: #fff solid 4px;
    position: absolute;
    bottom: -4ipx;
    left: -4ipx;
    z-index: 100;
}

.right-bottom{
    height: 16ipx;
    width: 16ipx;
    border-right: #fff solid 4px;
    border-bottom: #fff solid 4px;
    position: absolute;
    bottom: -4ipx;
    right: -4ipx;
    z-index: 100;
}
.transition{
    transition: transform 200ms;
}
    // <div class="left-top"></div>
    // <div class="right-top"></div>
    // <div class="left-bottom"></div>
    // <div class="right-bottom"></div>