css裁剪属性----clip-path

什么是clip-path

clip-path是一个css3新属性 , 一般用在svg元素上 , 但是也可以作为普通元素裁剪使用
解释 : clip-path 属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示，区域外的隐藏
普通标签上的使用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><link rel="stylesheet" href="./assets/demo1.css">
</head>
<body><div class="pc"><img src="./assets/正方形.jpg" alt="" style="width: 100%; height: 100%;"></div><div></div>
</body>
</html>


.pc{margin: 200px;width: 400px;height: 400px;background-color: orange;background-size: cover;overflow: hidden;
}
.pc>img{clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%); /*矩形*//* clip-path: circle(40%); 圆形*/transition: .1s clip-path; /* 裁剪的动画 */
}
.pc > img:hover{clip-path: polygon(0 0,100% 0%,100% 100%,0 100%);
}

语法


/* Keyword values */clip-path: none;/* <clip-source> values */
clip-path: url(resources.svg#c1);/* <geometry-box> values */
clip-path: margin-box;
clip-path: border-box;
clip-path: padding-box;
clip-path: content-box;
clip-path: fill-box;
clip-path: stroke-box;
clip-path: view-box;/* <basic-shape> values */
clip-path: inset(100px 50px);
clip-path: circle(50px at 0 100px);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
clip-path: path('M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z');/* Box and shape values combined */
clip-path: padding-box circle(50px at 0 100px);/* Global values */
clip-path: inherit;
clip-path: initial;
clip-path: unset;

0人点赞

css

css裁剪属性----clip-path相关推荐

CSS常用属性速查表
属性太多,对于我这种不深入WEB的人员,还是有个速查表方便多了,注意利用开头的目录,会不断更新的 CSS 字体属性(Font) 属性描述 CSS font 在一个声明中设置所有字体属性. 1 f ...
CSS样式属性参考手册
CSS3 动画属性(Animation) 属性描述 CSS @keyframes 规定动画. 3 animation 所有动画属性的简写属性,除了 animation-play-state 属性. ...
【CSS 文本属性（Text）】
CSS 文本属性 CSS 文本属性(Text) 1. color 属性: 颜色的前景色 (文本/文本装饰/边框/当前颜色的颜色) 2. direction 属性: 文本/表列/水平溢出的方向 (文 ...
CSS style属性大全
CSS style属性大全 I 元素 | i 对象 IMG 元素 | img 对象 DHTML 对象 IFRAME 元素 | iframe 对象 --------------------------- ...
2021-11-15 入门前端VScode必装的常用插件, HTML+CSS常用属性速记.
Html + Css 学习一.VSCode常用 //1. VScode常用快捷键 * 新建文件:ctrl + N * 切换自动换行:alt + Z * 复制当前行:ctrl + C:ctrl + V ...
Html中CSS常用属性
Html中CSS常用属性一.注释在style标签中注释的书写使用"/* 注释内容 */",而不是. 二.文字属性用于对文字进行修饰的属性 ...
CSS background属性详解
background是一种 CSS 简写属性,用于一次性集中定义各种背景属性,包括 color, image, origin 与 size, repeat 方式等等. 此属性是一个简写属性,可以在一 ...
【CSS 表格属性（Table）】
CSS 表格属性 Table 1. border-collapse 属性: 单元格/表格边框合并 2. border-spacing 属性: 设置表格/单元格边框间距 /间隔距离 (搭配 bo ...
【CSS 背景属性 background】
CSS 背景属性 background CSS 背景属性 1. background 属性: 一次性集中定义 8个背景相关属性 2. background-color 属性: 元素的背景颜色 ( ...

css裁剪属性----clip-path

什么是clip-path

css裁剪属性----clip-path相关推荐

最新文章

热门文章