css 剪辑图片_CSS中的clip-path裁剪图片用法

CSS中的clip-path能够让你指定一个网页元素的显示区域，而不是缺省的显示全部。在过去有个等效的属性， clip，但在新的CSS规范中，它已经被标志为deprecated，用新的clip-path代替。

.clip-me {

/* 已被标志为不推荐使用的写法 */

position: absolute; /* 需要 absolute 和 fixed 定位 */

clip: rect(110px, 160px, 170px, 60px); /* 或 "auto" */

/* 值描述的是一个 top/left 点和一个 bottom/right 点 */

/* 最新规范写法 (没有定位要求)， */

clip-path: inset(10px 20px 30px 40px); /* or "none" */

/* 值指的是 top, right, bottom, left 四个点 */

}

这个CSS属性大多被用在图片上，但不限于此。你甚至可以将clip-path运用到一个文章段落上，或者直接在文本上。

我将被裁剪

在clip-path的属性值中的inset()函数中有四个值，分别表达着top/left和bottom/right四个点，圈出一个矩形面积。这个矩形面积外的部分都将被裁剪隐藏掉。

需要注意的是，数值中间是用空格分割的，而老式的是用逗号

从下面的演示中可以看到效果：

clip-path属性的其它类型值:

.clip-me {

/* 引用一个内联的 SVG 路径*/

clip-path: url(#c1);

/* 引用一个外部的 SVG 路径*/

clip-path: url(path.svg#c1);

/* 多边形 */

clip-path: polygon(5% 5%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);

/* 圆形 */

clip-path: circle(30px at 35px 35px);

/* 椭圆 */

clip-path: ellipse(65px 30px at 125px 40px);

/* inset-rectangle() 将会替代 inset() ? */

/* rectangle() 有可能出现于 SVG 2 */

/* 圆角 */

clip-path: inset(10% 10% 10% 10% round 20%, 20%);

}

SVG 裁剪路径样例：

css 剪辑图片_CSS中的clip-path裁剪图片用法相关推荐

电脑怎么自由裁剪图片？一分钟了解快速裁剪图片
我们拍摄.下载图片后,通常需要把图片处理一下,比如图片裁剪(图片裁剪在线裁剪照片大小尺寸工具-压缩图)掉一些多余的边边框框,这时候就需要用到图片裁剪工具,小伙伴肯定会问有没有比较方便一点的照片裁剪的 ...
css横向排列_CSS中伪元素和伪类的经典使用技巧
随着前端技术的发展,CSS样式的制作在网页中占据着十分重要的地位.前台页面的样式布局.以及展现给用户的体验效果都离不开CSS;虽然在实际的开发中会大量的使用一些主流的UI样式框架,但这些样式框架每一个 ...
takephoto 框架_GitHub - Smecking/TakePhoto: 一款用于在Android设备上获取照片（拍照或从相册、文件中选择）、裁剪图片、压缩图片的开源工具库...
TakePhoto是一款用于在Android设备上获取照片(拍照或从相册.文件中选择).裁剪图片.压缩图片的开源工具库,目前最新版本4.0.2. 3.0以下版本及API说明,详见TakePhoto2. ...
html框架代码背景图片,CSS3中background-image实现多背景图片（代码实例）
本文目标: 1.掌握background-image多背景的实现问题: 1.实现以下效果,使用纯DIV+CSS,必须使用background-image 附加说明: 1.整体宽度是1000px,高3 ...
android 实现异步加载图片,Android中ImageView异步加载图片类
本源码是从网络找到经修改以方便直接调用感觉用着还可以首先在项目中添加一个专门加载图片的类AsyncImageLoaderpackage com.demo.core; import java.io.I ...
php 按比例裁剪图片,自定义裁剪图片大小，按照一定比例裁剪图片的软件
在网上下载图片后发现,图片有想要留住的部分,但又有不想留的部分,想马赛克掉不喜欢的区域但却又影响美观,这时候只能通过照片裁剪功能将不想留住的区域裁剪掉.在这里小编推荐为你一款照片裁剪工具,该工具可以自 ...
canva画图图片居中裁剪_CSS3 object-fit:cover 剪裁图片尺寸适配div - 居中并裁剪图片...
今天来分享另一种最佳最完美的居中自动剪裁图片的功能,虽然IE8无法做到,但现在IE8还需要考虑吗? 放弃吧,直接使用 object-fit: cover; ! 你还记得通过设置图片的 backgro ...
css 透明背景_css 中多种边框的实现小窍门
一.多重边框[1] 背景知识:box-shadow,outline 鉴于使用场景的多元化,多重边框的设计越来越多,以往可以借助 border-image 属性应付一下,但是这个在css 代码层面并不是 ...
css 高度塌陷_css中父元素高度塌陷是什么意思，如何解决？（附代码）
本篇文章给大家带来的内容是关于css中父元素高度塌陷是什么意思,如何解决?,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 首先得回答什么是父元素高度塌陷: 在文档流中,父元素的高度默 ...

css 剪辑图片_CSS中的clip-path裁剪图片用法

css 剪辑图片_CSS中的clip-path裁剪图片用法相关推荐

最新文章

热门文章