clip

clip 属性用来设置元素的形状。用来剪裁绝对定位元素。当一幅图像的尺寸大于包含它的元素时，clip 属性允许规定一个元素的可见尺寸，这样此元素就会被修剪并显示在这个元素中。

1. clip 属性只能用于绝对定位元素，position: absolute 或 fixed。
2. clip 属性有三种取值：auto 默认的inherit继承父级的一个定义好的形状，但现在只能是方形的 rect()。clip: { shape | auto| inherit }
3. shape rect(, , , ) 中的四个元素不可省略。

rect

img {
  position:absolute;
  top:0;
  left:10px;
  clip: rect(52px, 280px, 290px, 95px);
}

clip-path

clip-path 属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示，区域外的隐藏。clip-path是一个css3新属性 , 一般用在svg元素上 , 但是也可以作为普通元素裁剪使用。

clip-path属性

clip-path属性可以使用四种裁剪函数：circle()、ellipse()、inset()和polygon()。 下面用一个例子来演示这四个函数的效果，将它们分别应用到四个div元素中，样式如下，得到的形状如下图所示。

circle()：修建矩形的可视范围

clip-path: inset(10px 20px 30px 40px);

ellipse()：修建圆形的可视范围

clip-path: circle(50%);

inset()：修建椭圆形的可视范围

clip-path: ellipse(50% 30%);

polygon()：修建任意多变形的可视范围

clip-path: polygon(0 0, 100px 0, 160px 200px, 0 200px);

div {
    width: 200px;
    height: 300px;
    background-color: red;
    clip-path: polygon(0 0,
            0% 42%,
            5% 42%,
            5% 58%,
            0 58%,
            0 100%,
            100% 100%,
            100% 58%,
            95% 58%,
            95% 42%,
            100% 42%,
            100% 0);
}

遮罩

蒙版

蒙版（masking）与裁剪类似，也是让元素以某种形状显示，但蒙版能根据透明度和灰度值计算裁剪边缘，并且有更多的蒙版属性可供选择，例如定位、尺寸、填充方式等。

<div class="lake"></div>
<div class="star"></div>
<div class="lake star-mask"></div>

.lake {
  background: url(./images/news.png);
}
.star {
  background: url(./images/tech.png);
  background-position: center;
  background-repeat: no-repeat;
}
.star-mask {
  -webkit-mask-image: url(./images/tech.png);
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
}

替换元素的填充和定位

• fill：将元素盒子填充满，它是object-fit属性的默认值。
• contain：保持宽高比缩放，直到能将整块内容填充进元素盒子为止。
• none：保持原有尺寸填充。
• cover：保持宽高比缩放，直到水平或垂直方向撑满元素盒子为止。
• scale-down：作用与none或contain中的一个相同，取决于谁的尺寸更小。

.banner img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}