码迷,mamicode.com
首页 > Web开发 > 详细

CSS3的clip-path属性

时间:2015-04-14 00:17:02      阅读:308      评论:0      收藏:0      [点我收藏+]

标签:

首先,说一下clip-path属性,以前我也没有见过这个clip-path属性,网上搜了一下,原来clip-path是‘剪切’的意思。
clip-path:polygon(x,y)属性,polygon(x,y)内的x表示横坐标的位置(px %),y表示纵坐标的位置(px %)。
说到底,这个clip-path剪切好比photoshop一样,可以替代photoshop剪切图片,只不过,代码和ps的区别在于代码要手动找路径,ps可以直接用魔术棒。
这是我刚刚用clip-path剪切的图片:

技术分享

其实,svg也能制作路径图。svg也有clippath属性。

原图地址:http://images.cnblogs.com/cnblogs_com/hao5599/678419/o_20150314.jpg

<!-- 参考学习http://www.w3cplus.com/css3/css-svg-clipping.html -->

CSS3的clip-path属性

标签:

原文地址:http://www.cnblogs.com/hao5599/p/4423477.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!