CSS clip 属性深刻

时间 2019-12-10

标签 css clip 属性深刻栏目 CSS 繁體版

原文原文链接

以前的工做中有用到过clip这个属性。最近工做又再次用到这个属性时，发现本身忘了怎么设置这个属性值的了。看来上次没有真的弄懂这个属性，又去查了查文档学习了一下。这里简单分享，同时加深一下映像。css

做用

w3school是这么说的: clip 属性剪裁绝对定位元素。 MDN是这么说的: clip 属性定义了元素的哪一部分是可见的。html

可能值

值	描述
shape	设置元素的形状。惟一合法的形状值是：rect (top, right, bottom, left)
auto	默认值。不该用任何剪裁。
inherit	规定应该从父元素继承 clip 属性的值。

rect(<top> <right> <bottom> <left>)裁剪出一个"矩形"的可见区域。
<top> 指定矩形上边框相对于盒子上边框边的偏移
<bottom> 指定矩形下边框相对于盒子上边框边的偏移
<left> 指定矩形左边框相对于盒子左边框边界的偏移
<right> 指定矩形右边框相对于盒子左边框边界的偏移学习

实例

如今用clip属性对下面这张图片进行一下裁剪
spa

<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个像素。因此显示的部分应该就是左下角四分之一区域。以下图：
ssr

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