html图片圆角和CSS切割图片只取图片中一部分

CSS切割图片只取图片中一部分

参考：https://blog.youkuaiyun.com/u010174173/article/details/52641531

 我使用了文章的方法二：

.VIVYBJ{
    position: absolute;
    left: -300px;
    top: -500px;
    /*CSS切割图片只取图片中一部分  begin*/
    /* clip:rect(0 200px 1570px 0);  */
    /*CSS切割图片只取图片中一部分  end*/
    clip:rect(500px 2000px 1000px 100px);

    /*图像模糊css  begin*/
    filter: blur(20px);
    
    -webkit-filter: blur(20px);  /* chrome, opera */
                
    -ms-filter: blur(20px);
                
    -moz-filter: blur(20px);
    /*图像模糊css  end*/

 用img的clip属性中的rect，clip:rect(y1 y1 x2 x1)参数说明如下： 
y1=定位的y坐标(垂直方向)的起点 
x1=定位的x坐标(水平方向)的起点 
y2=定位的y坐标(垂直方向)的终点 
x2=定位的x坐标(水平方向)的终点 
注:坐标的起点是在左上角 

 

图片圆角

以有class = “VIVYImg” 为例的图片圆角处理css代码

.VIVYImg img{
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius:8px;
}