使用CSS3的clip-path(裁剪路径)实现剪贴区域的显示以及实例实现图片渐变

编程之家收集整理的这篇文章主要介绍了使用CSS3的clip-path(裁剪路径)实现剪贴区域的显示以及实例实现图片渐变编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

clip-path介绍

clip-path 直译过来就是裁剪路径,使用SVG或形状定义一个HTML元素的可见区域的方法。想象一下你在Photoshop中勾勒路径的场景。MDN上是这样介绍 clip-path的:

clip-path属性可以防止部分元素通过定义的剪切区域来显示,仅通过显示的特殊区域。剪切区域是被URL定义的路径代替行内或者外部svg,或者定义路线的方法例如circle().。clip-path属性代替了现在已经弃用的剪切 clip属性

基本语法

<clip-source> | [ <basic-shape> || <geometry-Box> ] | none

/*属性说明*/
<clip-source> = <url>
<basic-shape> = <inset()> | <circle()> | <ellipse()> | <polygon()>
<geometry-Box> = <shape-Box> | fill-Box | stroke-Box | view-Box

兼容性

clip-path目前兼容性较差,IE和Edge直接不支持

语法详解和示例

为了更明显的表示裁剪区域,我给每个demo添加了同样宽高的透明背景,其中色块表示被裁剪后的部分,透明背景表示被裁剪的区域。

基本图形:inset(定义矩形)

inset() : 定义一个矩形 。注意,定义矩形不是rect,而是 inset。

//语法
inset( <length-percentage>{1,4} [ round <border-radius> ]? )
说明
inset()可以传入5个参数,分别对应top,right,bottom,left的裁剪位置,round radius(可选,圆角)

示例
clip-path: inset(2em 3em 2em 1em round 2em);

 

基本图形:circle(定义圆)

//语法
circle( [ <shape-radius> ]? [ at <position> ]? )
//说明
circle()可以传人2个可选参数;
1. 圆的半径,默认元素宽高中短的那个为直径,支持百分比
2. 圆心位置,默认为元素中心点
//半径公式
如果半径使用百分比:圆的半径 = (sqrt(width^2+height^2)/sqrt(2)) * 百分比 

//示例
clip-path: circle(30% at 150px 120px);

基本图形:ellipse(定义椭圆)

//语法
ellipse( [ <shape-radius>{2} ]? [ at <position> ]? )
//说明
ellipse()可以传人3个可选参数;
1. 椭圆的X轴半径,默认是宽度的一半,支持百分比
2. 椭圆的Y轴半径,默认是高度的一半,支持百分比
3. 椭圆中心位置,默认是元素的中心点

//示例
clip-path: ellipse(45% 30% at 50% 50%);

 

基本图形:polygon(定义多边形)

//语法
polygon( <fill-rule>?,[ <length-percentage> <length-percentage> ]# )
//说明
<fill-rule>可选,表示填充规则用来确定该多边形的内部。可能的值有nonzero和evenodd,默认值是nonzero
后面的每对参数表示多边形的顶点坐标(X,Y),也就是连接点

//示例
clip-path: polygon(50% 0,100% 50%,0 100%);

其他属性

除了 inset,circle等 basic-shape属性外,clip-path还具有url,geometry-Box属性值,具体可以参考MDN上的介绍。

完整语法

 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%,50% 100%,0% 50%);
clip-path: path('M0.5,1 C0.5,1,0.7,0.3 A0.25,0.25,0.5,0.3 C1,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;

图片渐变实例

实现图片从上往下渐变

HTML代码

<div class="img">
    img src="images/1.jpg"/>
</div>

CSS代码

*{padding:0;margin:0;}
.img{width:630px;height:630px;}
.img img{display: block;100%;}
    overflow: hidden;
    -webkit-clip-path: polygon(0 0,0 0,100% 0,100% 0);
    clip-path:
    opacity: 0;
    transition: opacity 1.1s ease 167ms,-webkit-clip-path 1.1s cubic-bezier(.19,.22,1); clip-path 1.1s cubic-bezier(.19,1),opacity 1.1s ease 167ms;
.img.current{ 1;代码:

$(function(){
    $(".img").addClass('current');
})

实现图片从左往右渐变

图片不显示的时候:

 -webkit-clip-path: polygon(0 0,0 100%);
 clip-path: polygon(0 0,0 100%);

图片显示的时候:

-webkit-clip-path: polygon(0 0,0 100%);

参考地址

总结

以上是编程之家为你收集整理的使用CSS3的clip-path(裁剪路径)实现剪贴区域的显示以及实例实现图片渐变全部内容,希望文章能够帮你解决使用CSS3的clip-path(裁剪路径)实现剪贴区域的显示以及实例实现图片渐变所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢寻找一群志同道合、互帮互助的学习伙伴,可以点击下方链接加入:
编程之家官方1群:1065694478(已满)
编程之家官方2群:163560250(已满)
编程之家官方3群:312128206

相关文章

猜你在找的HTML5相关文章

概述 WeUI是一套同微信原生视觉体验一致的基础样式库,为微信Web开发量身设计,可以令用户的使用感知更加统一。包含button、cell、dialog、toast、article、icon等各式元素
在新的HTML5标准中,新增了一个非常重要的元素—canvas元素。使用该元素,可以在页面中直接进行各种复杂图形的制作。因此,如果使用该元素绘制统计图,比之前使用服务器端控件来生成统计图的方法更加具有
ReactJS通常也被称为&quot;React&quot;,是一个刚刚在这场游戏中登场的新手。它由Facebook创建,并在2013年首次发布。Facebook认为React在处理SPA问题上可以成
又到了一年一度的中国春运,今年的网络订票(12306.cn)有好多的故事上演,下面几条是这两天的几条相关新闻。猎豹浏览器推出春运抢票版 九大优势轻松订票抢票插件风靡的恶果:农民工成购车票弱势群体123
Twitter发布了Flight项目。Flight是一个轻量级的、基于组件的JavaScript框架,可以将行为映射到DOM节点上。Twitter将其用在自己的Web应用上,Twitter基于MIT许
JayData 是一个标准的、跨平台的库和方法,用于访问和操作各种不同的数据源,最适合用于 JavaScript 和 HTML5 应用。 官方网站:http://jaydata.org/ ASP.NE
简洁优雅的 Twitter Bootstrap Metro 界面风格开发框架,是 GitHub 上的开源项目http://talkslab.github.com/metro-bootstrap 。Me
XB 软件公司最近发布了JavaScript UI 库Webix ,其中包含的组件超过45个,用这些组件可以构建跟HTML5 和 CSS3 兼容的程序,这些程序不仅能在个人电脑上运行,还能用在iOS、