css: clip浅析

前言

css中裁剪和遮罩相关的属性一般来说是比较少用到的,但是最近写项目的时候遇到一个问题,要给一张图片上加个白色遮罩,产生合成效果,这就不得不用到css遮罩相关的属性,顺便把裁剪相关属性一起学习来,做个总结,接下来就进入正文

clip-path

clip是css中第一个用来裁剪的属性,但是由于新的标准,clip特性已经从web标准中删除,建议使用clip-path,因此我们来看clip-path是怎么用的

语法

<clip-source>用<url>表示剪切元素的路径

<basic-shape> 一种形状,其大小和位置由<几何盒>值定义。如果没有指定几何框,则边框将用作参考框

<geometry-box> 如果同 <basic-shape> 一起声明,它将为基本形状提供相应的参考框盒。通过自定义,它将利用确定的盒子边缘包括任何形状边角

接下来就一个个来看具体的属性,先从basic-shape开始,basic-shape提供了多个函数,先来看最常用的函数:inset()

inset

inset( <shape-arg>{1,4} [round <border-radius>]? )

inset表示方形裁剪,函数提供来五个参数,前四个参数分别代表插进的长方形与相关盒模型的上右下左四个边界的偏移量,第五个可选参数<border-radius>用于定义插进长方形顶点的圆弧角度

光看字面意思可能不太好理解,来个例子吧:

<div class="wrap">
    <img class="lake" src="../img/lake.jpg">
</div>
.wrap {
  display: inline-block;
  line-height: 1;
  background-color: #000;
}
.lake {
  width: 200px;
}

image

.lake {
  width: 200px;
  clip-path: inset(10px 15px 20px 25px round 10px);
}

image
第一段代码没有给clip-path时,得到图片周围没有黑边,当加上clip-path时,图片周围产生了黑边,黑边的部分就是图片被裁掉的不部分,inset(10px 15px 20px 25px round 10px),上边界10px,右边界15px,下边界20px,左边界25px,裁剪角弧度10px,通过这个例子应该就能看出参数作用。

接下看第二个函数circle():

circle( [<shape-radius>]? [at <position>]?

circle表示圆形裁剪,函数提供两个可选参数,第一个圆形的半径,第二个圆心的位置

来看个例子:

.lake {
  width: 200px;
  clip-path: circle(50px at 80px 80px);
}

image

.lake {
  width: 200px;
  clip-path: circle(50px at center);
}

image
circle()的圆心位置除了指定具体的值外还可以通过center这种位置参数直接指定圆心的位置。

第三个函数:ellipse()

ellipse( [<shape-radius>{2}]? [at <position>]? )

ellipse表示椭圆裁剪,提供三个参数,第一个参数x轴方向半径,第二个参数y轴方向半径,第三个参数圆心的位置

来看个例子:

.lake {
  width: 200px;
  clip-path: ellipse(100px 50px at 100px 100px);
}

image

.lake {
  width: 200px;
  clip-path: ellipse(100px 50px at top);
}

image
和circle一样ellipse的圆心位置也可以使用top这类的位置值

第四个函数:polygon()

polygon( [<fill-rule>,]? [<shape-arg> <shape-arg>]# )

polygon表示多边形裁剪,第一个参数<fill-rule> 代表了多边形的填充规则,可选值nonzero 和 evenodd,第二个参数是多边形顶点坐标的合集

来看个例子:

.lake {
  width: 200px;
  height: 200px;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%)
}

image
上面这个例子利用了多边形裁剪的规则,将图片裁剪成了一个五角星,fill-rule两个关键字都试了一下,裁剪效果相同,这里有一个网址,上面clip-path basic-shape的所有用法演示,感兴趣的可以上去看看

第五个函数:path(),这个函数尝试了一下,在Chrome和Firefox两个浏览器上都不生效

url()

这里的clip-path url()函数里的参数并不是裁剪的用链接地址,而是一个剪切元素用的svg路径,举个例子:

<div class="wrap">
  <img class="lake" src="../img/lake.jpg">
  <svg width="0" height="0">
    <defs>
      <clipPath id="clip">
          <path d="M 10,30
          A 20,20 0,0,1 50,30
          A 20,20 0,0,1 90,30
          Q 90,60 50,90
          Q 10,60 10,30 z">
          </path>
      </clipPath>
   </defs>
  </svg>
</div>
.lake {
  width: 200px;
  clip-path: url(#clip)
}


上例子中利用svg的路径裁剪,将图片裁剪成了一个心形

裁剪参考框

裁剪参考框指的是裁剪元素的参考框盒,取值margin-box|border-box|padding-box|content-box|fill-box|stroke-box|view-box|,一般和basic-shape一起使用,举个例子:

.lake {
  width: 200px;
  clip-path:margin-box inset(10px 15px 20px 25px round 10px);
  background-color: #000;
}

这里的几个取值就不做详细介绍,和css盒模型类似,还有一个原因这个值在Chrome上不支持,但是Firefox上是可以使用的

浏览器支持

css属性功能再强大也要看浏览器的支持的程度,浏览器不支持说啥都没用.

上面是caniuse上查到的浏览器支持程度,可以看到出来一些低版本的浏览器不支持外,大多数高版本的浏览器都是支持的,可以放心使用

clip-path动画

基本语法和浏览器支持都介绍完了,接下来来看看clip-path的简单应用:clip-path动画,来看一个简单demo:

 @keyframes shape {
  from {
    clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
  }

  to {
    clip-path: polygon(50% 30%, 100% 0%, 70% 50%, 100% 100%, 50% 70%, 0% 100%, 30% 50%, 0% 0%);
  }
}
.lake {
  width: 200px;
  clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
  animation: 2s shape infinite alternate ease-in-out;
}

image
上例中利用clip-path写了一个简单的图形变换的动画,这算是一个比较简单的应用,实际上在处理图片展示和图形变换上的用处会更多,可以配合其他的属性写出很多复杂的图片展示效果

总结

clip-path算是一个不常用的css属性,由于最近在写图片编辑的时候用到了,因此写了这篇文章对clip-path用法做了简单的介绍,clip-path的强大还需要大家自己去项目中使用的时候慢慢体会,希望看了这篇文章对大家能有所帮助。如果有错误或不严谨的地方,欢迎批评指正,如果喜欢,欢迎点赞

Image placeholder
william
未设置
  22人点赞

没有讨论,发表一下自己的看法吧

推荐文章
【CSS全解01】CSS基础-体系化学CSS

大纲 基础部分学习占比:HTML1%`CSS19%Javascript80%`(`基础部分?%框架?%`项目?%) CSS历史 AcidTestforbrowser CSS是艺术(非逻辑,用测试经验来

不一样的css,sass(scss)的基本使用

前言此文主要记录sass的scss语法的基本使用。sass是css的预编译器,它扩展一些css所没有的变量的定义、条件控制、循环、自定义方法等。基础内容1.变量/*scss*/ //声明变量 $pri

前端培训-中级阶段(31)- Class 的基本语法、Class 的继承(2019-12-26期)

前端最基础的就是HTML+CSS+Javascript。掌握了这三门技术就算入门,但也仅仅是入门,现在前端开发的定义已经远远不止这些。前端小课堂(HTML/CSS/JS),本着提升技术水平,打牢基础知

浅析 PHP7 的垃圾回收机制

垃圾回收机制 垃圾回收机制是一种动态存储分配方案。它会自动释放程序不再需要的已分配的内存块。自动回收内存的过程叫垃圾收集。垃圾回收机制可以让程序员不必过分关心程序内存分配,从而将更多的精力投入到业务逻

浅析 PHP7 底层运行机制

PHP7代码执行过程 PHP是解释型语言,其执行过程需先编译成中间代码,再经由特定的虚拟机,翻译成特定的指令被执行。其执行过程如下: PHP代码=>Token=>抽象语法树=>Opcodes=>执行

浅析 PHP7 底层运行机制

PHP7代码执行过程 PHP是解释型语言,其执行过程需先编译成中间代码,再经由特定的虚拟机,翻译成特定的指令被执行。其执行过程如下: PHP代码=>Token=>抽象语法树=>Opcodes=>执行

shadow DOM 浅析

引言 Shadow-dom游离在DOM树之外的节点树,但是他的创建基于普通DOM元素(非document),并且创建后的Shadow-dom节点可以从界面上直观的看到。更重要的是,Shadow-do

浅析 PHP-FPM、CGI、Fast CGI 的关系

作为一个phper,一直会接触到php、nignx等的相关配置,相关的名词比如PHP-FPM、CGI、FastCGI、SAPI等等应该都或多或少接触过,但自己对于这些知识点的掌握其实相对比较分散且形成

Linux系统——架构浅析

导语:掐指一算自己从研究生开始投入到Linux的海洋也有几年的时间,即便如此依然对其各种功能模块一知半解。无数次看了Linux内核的技术文章后一头雾水,为了更系统地更有方法的学Linux,特此记录。历

浅析RunLoop原理及其应用

引言:一个APP的启动与结束都是伴随着RunLoop循环往复的,不断的循环、不断的往复。当线程被杀掉、APP退出后被系统以占用内存为由杀掉,RunLoop就消失了。但平时开发中很少见到RunLoop,

css什么时候用class和id?

css什么时候用class和id?当css样式用于不止一个元素时,使用class来定义。当css样式只应用于一个元素时,使用id来定义。例如导航条,每个页面中,只存在一个顶部导航条的话,可以使用id来

css3.0和css2.0区别?

css3.0和css2.0区别?css3加强了css2的功能,增加了新的属性和新的标签,并且删除了一些冗余的标签,在布局方面减少了代码量。以前比较复杂的布局现在一个属性就搞定了(columns之类的属

css1和css2的区别是什么?

css1和css2的区别是什么?CSS1提供有关字体、颜色、位置和文本属性的基本信息,该版本已经得到了目前解析HTML和XML的浏览器的广泛支持。CSS2.0提供给我们了一个机制,让开发时可以不考虑显

dw cs6怎么保存为css格式

dwcs6怎么保存为css格式1、首先,打开DreamweaverCS6,新建一个css文档,选中“css”,点击确定按钮。2、将设计好的css样式放入该页面,@charset"utf-8";用来指定

wordpress无法加载css

wordpress无法加载css出现这种情况是因为wordpress安装时用http://localhost访问来安装,局域网访问时,加载css的路径不对,所以会出现css无法加载,只显示文字。解决方

scss和sass的区别是什么?

另外,SCSS还能识别大部分CSShacks(一些CSS小技巧)和特定于浏览器的语法,例如:古老的IEfilter语法。由于SCSS是CSS的扩展,因此,所有在CSS中正常工作的代码也能在SCSS中正

Scss与Sass是什么?

之间的区别是什么?下面本篇文章就来给大家介绍一下。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。Sass是什么?Sass是一门高于CSS的元语言,它能用来清晰地、结构化地描述文件样式

sass与scss的区别是什么?

Sass是采用Ruby语言编写的一款CSS预处理语言,它诞生于2007年,是最大的成熟的CSS预处理语言。最初它是为了配合HAML(一种缩进式HTML预编译器)而设计的,因此有着和HTML一样的缩进式

Oracle/云MySQL/MsSQL“大迁移”真相及最优方案

最近一段时间碰到一些数据迁移的项目,如:Oracle迁移到MySQL,MsSQL迁移到MySQL,云MySQL迁移到本地MySQL。对于这方面做了系统的整理。包括:迁移方案的选择、如何跳出迁移遇到的坑

一些JavaScript 类(class)中需要了解的知识

JavaScript使用原型继承:每个对象都从原型对象继承属性和方法。在Java或Swift等语言中使用的传统类作为创建对象的蓝图,在JavaScript中不存在,原型继承仅处理对象。原型继承可以模拟

jquery判断class是否存在?

jquery判断class是否存在?两种方法如下:●hasClass('classname')●is('.classname')例子:1、使用is('.classname')的方法$('div').i

jquery hasClass()方法怎么用?

jqueryhasClass()方法怎么用?hasClass()方法验证匹配元素是否包含指定的类,包含则返回true,否则返回false。语法结构:$(selector).hasClass(class

js如何修改css属性?

js如何修改css属性?1、修改style样式:通过document.styleSheets[n]//n表示期望修改的样式表序号,从0开始计数来获取到期望修改的样式表,通过cssRules[0]获取到

css语言难学吗?

CSS难学吗?css入门容易,想学深还是挺难的;学习css需要多加练习。CSS为什么难学CSS属性很多,难以一次性记下来CSS属性之间互相影响,难以完全掌握CSS核心概念都写在文档中,但是如果不熟悉一

css3支持哪些浏览器?

CSS3带来众多全新的设计体验,但有一个问题值得考虑:浏览器对CSS3特性的兼容情况如何?因为页面最终离不开用浏览器来渲染,并不是所有浏览器都完全支持CSS3的特性。有时花时间写的效果只能在特定的浏览