clip-path属性深入理解与使用
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属性深入理解与使用的更多相关文章
- 使用CAShapeLayer的path属性与UIBezierPath画出扫描框
1.CAShapeLayer CAShapeLayer具有path属性,(是CGPath对象),可以使用这个属性与UIBezierPath画出想要的图形.该子类根据其fill color和stroke ...
- CLIP PATH (MASK) GENERATOR是一款在线制作生成clip-path路径的工具,可以直接生成SVG代码以及配合Mask制作蒙板。
CLIP PATH (MASK) GENERATOR是一款在线制作生成clip-path路径的工具,可以直接生成SVG代码以及配合Mask制作蒙板. CLIP PATH (MASK) GENERATO ...
- iOS数据存储之属性列表理解
iOS数据存储之属性列表理解 数据存储简介 数据存储,即数据持久化,是指以何种方式保存应用程序的数据. 我的理解是,开发了一款应用之后,应用在内存中运行时会产生很多数据,这些数据在程序运行时和程序一起 ...
- prototype属性的理解
1.对象:对象是JS的基本数据类型(原始类型(数字.字符串和布尔值),对象类型).对象是一种复合值:它将很多值(原始值或者其他对象)聚合在一起,可通过名字访问这些值. 2.三类JS对象和两类属性: 内 ...
- 【wpf】Path画扇形以及Path的Data属性的理解
<Path x:Name="PathFillColor" Fill="{TemplateBinding Property=Button.Background}&qu ...
- 理解Clip Path
http://www.w3cplus.com/css3/using-making-sense-of-clip-path.html http://www.cnblogs.com/coco1s/p/602 ...
- css3 perspective perspective-origin属性的理解
perspective字面意思是:透视. 在w3school中它的解释为:设置元素被查看位置的视图:通俗讲,就是我们看看一个物体的所处的视角,近大远小.就比如我们正对着电脑:当我无限贴近电脑屏幕的时候 ...
- Python - 001 - 类与实例间属性的理解
Python是个很灵活的语言,光看它的类和实例间属性的访问机制就可以看出这一点,不过这一点还真的不好理解,做了些测试之后我的理解是这样的: 实例在访问class属性时,先检索自己的names, 如果有 ...
- 关于Thread.IsBackground属性的理解(转载)
C#中,Thread类有一个IsBackground 的属性.MSDN上对它的解释是:获取或设置一个值,该值指示某个线程是否为后台线程.个人感觉这样的解释等于没有解释. .Net中的线程,可以分为后台 ...
- iOS之 Category 属性 的理解
在 Objective-C 中可以通过 Category 给一个现有的类添加属性,但是却不能添加实例变量 反正读第一遍的时候我是有点晕的,可以添加“属性”,然后又说“添加实例变量”,第一感觉就好像 有 ...
随机推荐
- Java SE 15 新增特性
Java SE 15 新增特性 作者:Grey 原文地址:Java SE 15 新增特性 源码 源仓库: Github:java_new_features 镜像仓库: GitCode:java_new ...
- Tomcat 10无法使用javax包
可以导入新的 jakarta包 <dependencies><!--servlet依赖--> <dependency> <groupId>jakarta ...
- 【Java】学习路径62-枚举类型
public enum Role { TEACHER,STUDENT,CHEF } 使用: System.out.println(r1);//输出TEACHER System.out.println( ...
- 永久解决IDEA 连接 mysql时区问题`
永久解决IDEA 连接 mysql时区问题` 找到mysql的安装路径下的my.ini文件 加入以下代码 [mysqld] default-time_zone='+8:00' 关闭然后保存 打开然后以 ...
- Python入门系列(八)日期时间、数学、json
日期时间 Python中的日期本身不是数据类型,但我们可以导入一个名为datetime的模块,将日期作为日期对象使用. import datetime x = datetime.datetime.no ...
- clipboard实现文本复制的方法
1.下载地址: https://github.com/mo3408/clipboard 2.使用方法: 先引入js: <script src="dist/clipboard.min.j ...
- KingbaseES不同字符类型比较转换规则
Postgresql 常用的字符数据类型的有char.varchar和text,其中 char 固定长度类型, varchar 和 text 是可变长度类型.这三种类型在进行比较时,会进行隐含的类型转 ...
- alter role 导致的数据库无法登录问题
ALTER ROLE 用于更改一个数据库角色.只要改角色后续开始一个新会话,指定的值将会成为该会话的默认值,并且会覆盖 kingbase.conf中存在的值或者从命令行收到的值. 显性的更改角色的一 ...
- 延宕执行,妙用无穷,Go lang1.18入门精炼教程,由白丁入鸿儒,Golang中defer关键字延迟调用机制使用EP17
先行定义,延后执行.不得不佩服Go lang设计者天才的设计,事实上,defer关键字就相当于Python中的try{ ...}except{ ...}finally{...}结构设计中的finall ...
- 1.关于433MHz按键单片机解码
近段时间做项目要用到单片机接收433MHz按键发过来的码值,涉及短按.连按.长按,由于之前没有做过这方面一开始有点蒙,找遍网上都没有案例,现在项目完成了整理自己的一些心得和大家分享分享!!!直入主题. ...