深入理解 Css3 的 clip-path
clip-path CSS 属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示,区域外的隐藏。clip-path属性代替了现在已经弃用的剪切 clip属性。clip-path的属性值可以是以下几种:
- clip-path属性值为inset;
inset是将元素剪切为一个矩形,如clip-path:inset(10px),括号内的值类似于margin、padding值的写法,可以写一个值,也可以写多个值。 - clip-path属性值为circle;
circle是将元素剪切为一个圆形,如clip-path: circle(100px at 50% 50%),100px表示圆的直径,50% 50%表示圆心。 - clip-path属性值为ellipse;
circle是将元素剪切为一个椭形,如ellipse(150px 100px at 50% 50%),150px 表示椭圆的水平半径,100px表示椭圆的垂直半径,50% 50%表示圆心。 - ...
clip-path还可以有多种,如polygon、path、svg等。更多参考:clip-path;
最后来看一个DEMO吧
深入理解 Css3 的 clip-path的更多相关文章
- 半深入理解CSS3 object-position/object-fit属性
半深入理解CSS3 object-position/object-fit属性 转载:https://www.zhangxinxu.com/wordpress/2015/03/css3-object-p ...
- 【CSS3】 理解CSS3 transform中的Matrix(矩阵)
理解CSS3 transform中的Matrix(矩阵) by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu ...
- 理解CSS3中的background-size(对响应性图片等比例缩放)
理解CSS3中的background-size(对响应性图片等比例缩放) 阅读目录 background-size的基本属性 给图片设置固定的宽度和高度的 固定宽度400px和高度200px-使用ba ...
- 理解CSS3 transform中的Matrix(矩阵)
一.哥,我被你吓住了 打架的时候会被块头大的吓住,学习的时候会被奇怪名字吓住(如“拉普拉斯不等式”).这与情感化设计本质一致:界面设计好会让人觉得这个软件好用! 所以,当看到上面“Matrix(矩阵) ...
- CLIP PATH (MASK) GENERATOR是一款在线制作生成clip-path路径的工具,可以直接生成SVG代码以及配合Mask制作蒙板。
CLIP PATH (MASK) GENERATOR是一款在线制作生成clip-path路径的工具,可以直接生成SVG代码以及配合Mask制作蒙板. CLIP PATH (MASK) GENERATO ...
- 理解CSS3 transform中的Matrix(矩阵)——张鑫旭
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2427 一.哥,我被你 ...
- 理解CSS3属性transition
一.说明 1.1 定义和用法 transition 属性是一个简写属性,用于设置四个过渡属性: transition-property:规定设置过渡效果的CSS属性的名称. transition-du ...
- 理解Clip Path
http://www.w3cplus.com/css3/using-making-sense-of-clip-path.html http://www.cnblogs.com/coco1s/p/602 ...
- 深入理解css3中nth-child和 nth-of-type的区别
在css3中有两个新的选择器可以选择父元素下对应的子元素,一个是:nth-child 另一个是:nth-of-type. 但是它们到底有什么区别呢? 其实区别很简单::nth-of-type为什么要叫 ...
- 深入理解CSS3 Animation 帧动画
CSS3我在5年之前就有用了,包括公司项目都一直在很前沿的技术. 最近在写慕课网的七夕主题,用了大量的CSS3动画,但是真的沉淀下来仔细的去深入CSS3动画的各个属性发现还是很深的,这里就写下关于帧动 ...
随机推荐
- P1929 迷之阶梯
题目描述 在经过地球防卫小队的数学家连续多日的工作后,外星人发的密码终于得以破解.它 告诉我们在地球某一处的古老遗迹中,存在有对抗这次灾难的秘密武器.防卫小队立即赶 到这处遗迹.要进入遗迹,需要通过一 ...
- (2)打鸡儿教你Vue.js
var obj = {} Object.defineProperty(obj, 'msg', { // 设置 obj.msg = "1" 时set方法会被系统调用 参数分别是设置后 ...
- 用nginx解决前端跨域问题
假如前端你项目部署在nginx的根目录下,然后项目需要请求后台小伙伴写的接口 nginx配置: #user nobody; worker_processes 1; #error_log logs/er ...
- java打jar包与找不到依赖包详解
eclipse打jar包与找不到依赖包详解 eclipse打工具jar 1.项目右键-->export -->搜索java 2.选择JAR file 3.打包 eclipse打包可执行ja ...
- HBase-集群安装
需要先启动 HDFS 集群和 ZooKeeper 集群. Hadoop 集群安装:https://www.cnblogs.com/jhxxb/p/10629796.html ZooKeeper 集群安 ...
- shell 脚本 - 关于循环的应用
array=('Brand' 'BrandInfo' 'BrandBaojia' 'VehicleType' 'BrandBaoyang' 'Youhui' 'Config' \ 'Comment' ...
- Spring StopWatch源码
import java.text.NumberFormat; import java.util.LinkedList; import java.util.List; public class Stop ...
- 腾讯基于 Flink 的实时流计算平台演进之路
https://mp.weixin.qq.com/s/MGnG_Mpf6CUQWLJHvmWqLA
- 三种实现PHP伪静态页面的方法
PHP伪静态写法--其一 伪静态又名:URL重写 主要是为了SEO而生的.(SEO是什么?这个不用问我吧.呵呵-搞网络的不懂SEO那就----) 方法一: 比如这个网页 /soft.php/1,10 ...
- C#依赖注入实例
http://qing.weibo.com/tj/400082fa33001h7x.html 1.5 实现依赖注入1.5.1 背景介绍 设计模式中,尤其是结构型模式很多时候解决的就是对象间的依赖关系, ...