CSS clip 属性深入
2017-10-26 本文已影响24人
快减肥成功的胖纸
之前的工作中有用到过clip这个属性。最近工作又再次用到这个属性时，发现自己忘了怎么设置这个属性值的了。看来上次没有真的弄懂这个属性，又去查了查文档学习了一下。这里简单分享，同时加深一下映像。
作用
w3school是这么说的: clip 属性剪裁绝对定位元素。 MDN是这么说的: clip 属性定义了元素的哪一部分是可见的。
可能值
| 值 | 描述 |
|---|---|
| shape | 设置元素的形状。唯一合法的形状值是：rect (top, right, bottom, left) |
| auto | 默认值。不应用任何剪裁。 |
| inherit | 规定应该从父元素继承 clip 属性的值。 |
rect(<top> <right> <bottom> <left>)裁剪出一个"矩形"的可见区域。
<top> 指定矩形上边框相对于盒子上边框边的偏移
<bottom> 指定矩形下边框相对于盒子上边框边的偏移
<left> 指定矩形左边框相对于盒子左边框边界的偏移
<right> 指定矩形右边框相对于盒子左边框边界的偏移
实例
现在用clip属性对下面这张图片进行一下裁剪
原图
<html>
<head>
<style type="text/css">
img
{
position:absolute;
clip:rect(75px 60px 151px 0px);
}
</style>
</head>
<body>
<p>clip 属性剪切了一幅图像：</p>
<p></p>
</body>
</html>
clip:rect(75px 60px 151px 0px);指定矩形上边框相对于盒子上边框边的偏移75个像素，矩形左边框相对于盒子左边框边的偏移60个像素，矩形下边框相对于盒子上边框边的偏移151个像素，矩形右边框相对于盒子左边框边的偏移0个像素。所以显示的部分应该就是左下角四分之一区域。如下图：
效果
以上效果可以在w3school 做做尝试。我这里之前还使用clip实现过一个音频播放圆环进度条。有兴趣也可以看看。使用CSS clip 属性实现音频播放圆环进度条
