.img-clip{position:relative;width:95%;margin:0 auto;padding:0}.img-clip canvas{display:block}.img-clip .magnifier{position:absolute;top:2px;right:0;width:80px;height:80px;border-radius:50%;border:2px solid #fff}.img-clip .clip-hidden{display:none}.img-clip .clip-rect{position:absolute;border:1px dashed #de3c50;top:10px;left:10px;width:100px;height:100px;cursor:move}.img-clip .clip-rect .clip-tips{position:absolute;top:-40px;left:0;padding:5px;font-size:13px;background-color:#333;border-radius:5px;color:#fff}.img-clip .clip-rect-horn{position:absolute;display:block;background-color:rgba(222,60,80,.7);border-radius:50%;width:20px;height:20px}.img-clip .horn-n{top:-10px;left:50%;margin-left:-10px;cursor:n-resize}.img-clip .horn-s{bottom:-10px;left:50%;margin-left:-10px;cursor:s-resize}.img-clip .horn-w{top:50%;left:-10px;margin-top:-10px;cursor:w-resize}.img-clip .horn-e{top:50%;right:-10px;margin-top:-10px;cursor:e-resize}.img-clip .horn-nw{top:-10px;left:-10px;cursor:nw-resize}.img-clip .horn-ne{top:-10px;right:-10px;cursor:ne-resize}.img-clip .horn-sw{bottom:-10px;left:-10px;cursor:sw-resize}.img-clip .horn-se{bottom:-10px;right:-10px;cursor:se-resize}