摘要：之前的工作中有用到过这个属性。作用是这么说的属性剪裁绝对定位元素。唯一合法的形状值是默认值。规定应该从父元素继承属性的值。所以显示的部分应该就是左下角四分之一区域。使用属性实现音频播放圆环进度条
之前的工作中有用到过clip这个属性。最近工作又再次用到这个属性时，发现自己忘了怎么设置这个属性值的了。看来上次没有真的弄懂这个属性，又去查了查文档学习了一下。这里简单分享，同时加深一下映像。
作用w3school是这么说的: clip 属性剪裁绝对定位元素。 MDN是这么说的: clip 属性定义了元素的哪一部分是可见的。
可能值| 值 | 描述 |
|---|---|
| shape | 设置元素的形状。唯一合法的形状值是：rect (top, right, bottom, left) |
| auto | 默认值。不应用任何剪裁。 |
| inherit | 规定应该从父元素继承 clip 属性的值。 |
rect(
现在用clip属性对下面这张图片进行一下裁剪
clip 属性剪切了一幅图像：
clip:rect(75px 60px 151px 0px);指定矩形上边框相对于盒子上边框边的偏移75个像素，矩形左边框相对于盒子左边框边的偏移60个像素，矩形下边框相对于盒子上边框边的偏移151个像素，矩形右边框相对于盒子左边框边的偏移0个像素。所以显示的部分应该就是左下角四分之一区域。如下图：
以上效果可以在w3school 做做尝试。我这里之前还使用clip实现过一个音频播放圆环进度条。有兴趣也可以看看。使用CSS clip 属性实现音频播放圆环进度条
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/115568.html
摘要：一个用来生成各种形状包括随意拖拉自定义并且可以直接生成代码的网站。兼容性目前兼容性较差，和直接不支持，考虑兼容性的同学可以暂时等等。透明区域表示被裁剪的区域基本图形定义一个矩形。语法说明可选，表示填充规则用来确定该多边形的内部。 本文首发于 我的博客 曾经和某位朋友在聊天中讨论过这样一个话题：综合90%的网站的布局以及页面中的元素不是方的，就是圆的。就像所有的颜色都是由三原色（RGB）...
摘要：裁剪路径可以将如或自由变化的应用于任何元素。元素中不在形状边界内的任何内容都将被裁剪删除掉。例如，我们可以从内容隐藏完全裁剪开始，并增大裁剪路径以显示其中的内容。 随着浏览器对shape-outside和clip-path等属性的支持增加，CSS Shapes越来越受到关注。有几种方法可以使用CSS Shapes，特别是clip-path属性，乍一看我们并不知道这个属性如何使用，下面就...
摘要：裁剪路径可以将如或自由变化的应用于任何元素。元素中不在形状边界内的任何内容都将被裁剪删除掉。例如，我们可以从内容隐藏完全裁剪开始，并增大裁剪路径以显示其中的内容。 随着浏览器对shape-outside和clip-path等属性的支持增加，CSS Shapes越来越受到关注。有几种方法可以使用CSS Shapes，特别是clip-path属性，乍一看我们并不知道这个属性如何使用，下面就...
摘要：裁剪路径可以将如或自由变化的应用于任何元素。元素中不在形状边界内的任何内容都将被裁剪删除掉。例如，我们可以从内容隐藏完全裁剪开始，并增大裁剪路径以显示其中的内容。 随着浏览器对shape-outside和clip-path等属性的支持增加，CSS Shapes越来越受到关注。有几种方法可以使用CSS Shapes，特别是clip-path属性，乍一看我们并不知道这个属性如何使用，下面就...
摘要：这两个属性正是今天的重头戏，博主曾在从隐藏元素谈起提起过，但并没做深入解释。另外，四个值分别是相对于图片左上角为原点的坐标值。基本所有的浏览器都支持，可以放心使用。 前言 图片是一个网站必不可少的元素，而呈现出绚丽多彩的图片效果在很多情况下不仅仅是设计师的工作，通过代码来修饰图片也是一个前端工程师必备的技能。因为兼容性的问题，实际项目中可能用的比较少，包括博主自己也只是用过几次剪切，很...
阅读 1255·2021-10-11 11:12
阅读 2974·2021-09-30 09:46
阅读 1486·2021-07-28 00:14
阅读 3047·2019-08-30 13:49
阅读 2479·2019-08-29 11:27
阅读 525·2019-08-27 14:19
阅读 2898·2019-08-26 11:52
阅读 482·2019-08-23 18:14
