什么是剪裁图片
在网页制作中，有时我们需要将一个图片裁剪成一部分，而不是全部显示，这就需要用到剪裁图片的技术。图片剪裁指的是将一张原图中的一部分截取出来，作为一个新的图像使用，同时原图的其他部分被裁剪掉，从而实现更好的展示效果。在制作网站，网页时，经常会用到剪裁图片的技术，以适应网站布局的需要。
css如何剪裁图片
在CSS中，可以使用clip属性来剪裁图片。clip属性可以将元素剪裁成任意形状，另外，它只对定位后的元素有效。
clip属性常见值的含义
clip属性可以取如下四个值。
rect(top, right, bottom, left)：该值定义了一个裁剪区域，以像素为单位，依次为上、右、下和左边距离视口顶部、右部、下部、左部的距离。
auto：默认值，元素显示全部。
initial：将裁剪区域重置为初始值。
inherit：继承父元素的clip属性。
使用clip裁剪图片实例
以下例子演示了如何使用clip裁剪矩形形状图片：
.img{
position:absolute;
top:50px;
left:50px;
width:300px;
height:200px;
border:1px solid black;
clip: rect(50px, 200px, 150px, 50px);
}
以上代码中，定义了一个class为img的元素，它是一个绝对定位的元素，它的top和left属性确定了该元素相对页面左上角的位置。宽度和高度分别是300px、200px，同时还设置了一个黑色边框。clip属性的值为一个矩形，它的上边距离视口顶部50px，右边距离视口左部200px，下边距离视口顶部150px，左边距离视口左部50px。通过这种方式，可以只显示该元素中的一个矩形区域。
使用clip裁剪圆形形状图片
以下例子演示了如何使用clip裁剪圆形形状图片：
.img{
position:absolute;
top:50px;
left:50px;
width:300px;
height:200px;
border:1px solid black;
clip: ellipse(150px 100px at 150px 100px);
}
以上代码中，定义了一个class为img的元素，它是一个绝对定位的元素，它的top和left属性确定了该元素相对页面左上角的位置。宽度和高度分别是300px、200px，同时还设置了一个黑色边框。clip属性的值为一个椭圆形，其中圆心为(150px, 100px)，x轴半径为150px，y轴半径为100px。通过这种方式，可以只显示该元素中的一个圆形区域。
使用clip-path裁剪图片
除了clip属性，CSS3还引入了clip-path属性，可以通过clip-path属性来创建更复杂的图形裁剪区域。
clip-path属性的值是一个裁剪路径，可以用SVG路径、基本形状和CSS图形函数来定义。
使用SVG路径裁剪图片
以下演示了如何使用clip-path和SVG路径裁剪图片：
.img{
position:absolute;
top:50px;
left:50px;
width:300px;
height:200px;
-webkit-clip-path: url(#myClip);
clip-path: url(#myClip);
}
以上代码中，定义了一个class为img的元素，它是一个绝对定位的元素，它的top和left属性确定了该元素相对页面左上角的位置。宽度和高度分别是300px、200px。clip-path属性的值使用了SVG路径。
需要添加SVG代码如下：
<svg width="0" height="0">
<defs>
<clipPath id="myClip">
<path d="M105.3,45.2c0,0-31.7,17.2-51,34.1L.5,99.8v1.7h163V99L155.2,79
C130,61,105.3,45.2,105.3,45.2z"/>
</clipPath>
</defs>
</svg>
以上代码使用defs定义了一个clipPath元素，用于定义裁剪区域的路径，id为myClip。裁剪路径的代码定义了一个不规则的封闭区域。
使用CSS图形函数裁剪图片
以下演示了如何使用clip-path和CSS图形函数裁剪图片：
.img{
position:absolute;
top:50px;
left:50px;
width:300px;
height:200px;
-webkit-clip-path: polygon(0 20%, 100% 0, 100% 80%, 0 100%);
clip-path: polygon(0 20%, 100% 0, 100% 80%, 0 100%);
}
以上代码中，定义了一个class为img的元素，它是一个绝对定位的元素，它的top和left属性确定了该元素相对页面左上角的位置。宽度和高度分别是300px、200px。clip-path属性的值使用了CSS图形函数。CSS图形函数可以创建丰富的裁剪路径，如梯形、菱形、圆角矩形以及自定义的多边形等。
总结
本文主要介绍了剪裁图片的技术，以及CSS如何实现图片剪裁，包括clip和clip-path两种方式。Clip属性只能取矩形，而clip-path属性可以使用SVG路径、基本图形和CSS图形函数等方式来定义裁剪区域。通过网上的资源来熟悉了解这些知识，对于CSS的应用也更加熟练了。