clip-path CSS 属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示,区域外的隐藏。

clip-path的属性值可以是以下几种:

1.inset; 将元素剪裁为一个矩形,

定义:clip-path: inset(<距离元素上面的距离>,<距离元素右面的距离> ,<距离元素下面的距离>,<距离元素左面的距离>,<圆角边框> ),括号内的值类似于margin、padding值的写法,可以写一个值,也可以写多个值。

使用:clip-path: inset(2px 2px 20px 20px round 10px);

效果:

代码:

1
2
3
4
5
6
7
8
9
10
    .divTwo{
           margin: 50px;
           width: 80px;
           height: 80px;
           
           border: 1px solid #000;
           clip-path: inset(2px 2px 20px 20px round 10px);
       }
 
<div class="divTwo"></div>

2. circle;将元素剪裁成一个圆

定义:clip-path: circle(圆的半径 at 圆心)

使用:clip-path: circle(40px at 50% 50%)

效果:

3. ellipse;将元素剪裁成一个椭圆

定义:clip-path: ellipse(圆的水平半径 圆的垂直半径 at 圆心)

使用:clip-path: ellipse(20px 40px at 50% 50%)

效果:

4. polygon;将元素剪裁成一个多边形,这里其实就是描点,多点连线,最少三个点,以距离左上角的长度为单位,跟canvas画布很像,下面以三角形为例

定义:clip-path: polygon(<距离左上角的X轴长度  距离左上角Y轴的长度>,<距离左上角的X轴长度  距离左上角Y轴的长度>,<距离左上角的X轴长度  距离左上角Y轴的长度>)

使用:clip-path: polygon(40px 0px, 0px  80px, 80px 80px);

效果:

 clip-path: polygon(35px 40px,50px 0,65px 40px,100px 40px,70px 60px,80px 100px,50px 80px,20px 100px,30px 60px,0px 40px); //五角星

clip-path属性深入理解与使用的更多相关文章

  1. 使用CAShapeLayer的path属性与UIBezierPath画出扫描框

    1.CAShapeLayer CAShapeLayer具有path属性,(是CGPath对象),可以使用这个属性与UIBezierPath画出想要的图形.该子类根据其fill color和stroke ...

  2. CLIP PATH (MASK) GENERATOR是一款在线制作生成clip-path路径的工具,可以直接生成SVG代码以及配合Mask制作蒙板。

    CLIP PATH (MASK) GENERATOR是一款在线制作生成clip-path路径的工具,可以直接生成SVG代码以及配合Mask制作蒙板. CLIP PATH (MASK) GENERATO ...

  3. iOS数据存储之属性列表理解

    iOS数据存储之属性列表理解 数据存储简介 数据存储,即数据持久化,是指以何种方式保存应用程序的数据. 我的理解是,开发了一款应用之后,应用在内存中运行时会产生很多数据,这些数据在程序运行时和程序一起 ...

  4. prototype属性的理解

    1.对象:对象是JS的基本数据类型(原始类型(数字.字符串和布尔值),对象类型).对象是一种复合值:它将很多值(原始值或者其他对象)聚合在一起,可通过名字访问这些值. 2.三类JS对象和两类属性: 内 ...

  5. 【wpf】Path画扇形以及Path的Data属性的理解

    <Path x:Name="PathFillColor" Fill="{TemplateBinding Property=Button.Background}&qu ...

  6. 理解Clip Path

    http://www.w3cplus.com/css3/using-making-sense-of-clip-path.html http://www.cnblogs.com/coco1s/p/602 ...

  7. css3 perspective perspective-origin属性的理解

    perspective字面意思是:透视. 在w3school中它的解释为:设置元素被查看位置的视图:通俗讲,就是我们看看一个物体的所处的视角,近大远小.就比如我们正对着电脑:当我无限贴近电脑屏幕的时候 ...

  8. Python - 001 - 类与实例间属性的理解

    Python是个很灵活的语言,光看它的类和实例间属性的访问机制就可以看出这一点,不过这一点还真的不好理解,做了些测试之后我的理解是这样的: 实例在访问class属性时,先检索自己的names, 如果有 ...

  9. 关于Thread.IsBackground属性的理解(转载)

    C#中,Thread类有一个IsBackground 的属性.MSDN上对它的解释是:获取或设置一个值,该值指示某个线程是否为后台线程.个人感觉这样的解释等于没有解释. .Net中的线程,可以分为后台 ...

  10. iOS之 Category 属性 的理解

    在 Objective-C 中可以通过 Category 给一个现有的类添加属性,但是却不能添加实例变量 反正读第一遍的时候我是有点晕的,可以添加“属性”,然后又说“添加实例变量”,第一感觉就好像 有 ...

随机推荐

  1. Word 分栏符怎么使用

    如果你使用栏来设置文档格式(如在某些新闻稿布局中),则文本将自动从一栏排列到另一栏.可以插入你自己的分栏符,以更好地控制文档格式. 单击"布局"选项卡--"页面设置&qu ...

  2. scratch制作彩虹猫病毒模拟器

    scratch制作彩虹猫病毒模拟器 hello,大家好. 编程慢慢更加接近生活,甚至小孩也开始学了,比如scratch编程,小编今天就带了一件作品(彩虹猫病毒模拟器) 我们先看一下效果| 做的还可以, ...

  3. Hive存储格式之ORC File详解,什么是ORC File

    目录 概述 文件存储结构 Stripe Index Data Row Data Stripe Footer 两个补充名词 Row Group Stream File Footer 条纹信息 列统计 元 ...

  4. noip2018提高组初赛试题

    一.单项选择题(共 10 题,每题 2 分,共计 20 分: 每题有且仅有一个正确选项) \2. 下列属于解释执行的程序设计语言是( ). A. C B. C++ C. Pascal D. Pytho ...

  5. 【2022-09-09】Django框架(九)

    Django框架(九) cookie与session简介 网址的发展史: 1.起初网站都没有保存用户功能的需求,所有用户访问返回的结果都是一样的. 比如:新闻网页,博客网页,小说... (这些网页是不 ...

  6. docker学习笔记一-docker安装与卸载

    环境查看 # 1 查询当前centOS的版本,官方要求版本为7以上 uname -r 查询系统内核 cat /etc/os-release 系统版本 安装 # 1.卸载旧版本 yum remove d ...

  7. Java中如何创建不可变(immutable)类

    什么是不可变类 1. 不可变类是指类的实例一经创建完成,这个实例的内容就不会改变. 2. Java中的String和八个基本类型的包装类(Integer, Short, Byte, Long, Dou ...

  8. 使用Vite快速构建Vue3+ts+pinia脚手架

    一.前言 vue3的快速更新,很多IT发展快的地区在22开始都已经提上日程,小编所在的青岛好像最近才有点风波.vue3的人才在青岛还是比较稀缺的哈,纯属小编自己的看法,可能小编是个井底之蛙!! vue ...

  9. git commit、git push、git pull、 git fetch、git merge 的含义与区别

    git commit:是将本地修改过的文件提交到本地库中: git push:是将本地库中的最新信息发送给远程库: git pull:是从远程获取最新版本到本地,并自动merge: git fetch ...

  10. 「Chroot环境」Debian Testing amd64 on arm64

    这个是适用于ARM64环境的AMD64 Debian Testing系统.基于FEX转译.这个系统运行在ARM64的手机和电脑上,运行的软件是AMD64(X64)格式.下载链接提供桌面版和基础版.适用 ...