CSS clip 属性深入

最新推荐文章于 2024-06-02 01:03:39 发布

weixin_33768481

最新推荐文章于 2024-06-02 01:03:39 发布

阅读量118

点赞数

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000011727957

本文介绍了 CSS 中的 clip 属性及其使用方法。通过实例演示如何裁剪绝对定位元素的可见部分，包括设置矩形裁剪区域的具体参数。

之前的工作中有用到过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><img border="0" src="http://www.w3school.com.cn/i/eg_bookasp.gif" width="120" height="151"></p>
</body>

</html>

clip:rect(75px 60px 151px 0px);指定矩形上边框相对于盒子上边框边的偏移75个像素，矩形左边框相对于盒子左边框边的偏移60个像素，矩形下边框相对于盒子上边框边的偏移151个像素，矩形右边框相对于盒子左边框边的偏移0个像素。所以显示的部分应该就是左下角四分之一区域。如下图：

以上效果可以在w3school 做做尝试。我这里之前还使用clip实现过一个音频播放圆环进度条。有兴趣也可以看看。使用CSS clip 属性实现音频播放圆环进度条