蚂蚁部落

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 293|回复: 1

css clip-path属性详解

[复制链接]
发表于 2016-12-30 14:24:40 | 显示全部楼层 |阅读模式
本帖最后由 antzone 于 2016-12-30 14:51 编辑

css clip-path属性详解:
这是css3新增的属性,由于浏览器支持的问题所以导致没有得到广泛应用(不比担心,广泛应用的一天应该很快到来)。
从属性的名称就能够感知此它的作用:用来对容器元素或者图片进行裁切。
其实css中早就存在具有裁切功能clip属性,具体可以参阅CSS3 clip属性一章节。
不过clip属性现在已经不被推荐使用,主要是由于以下几点缺陷:
(1).能够被裁切的元素定位方式必须是position:absolute或者position:fixed。
(2).只支持rect()裁切,功能过于单一。
这是后面所有代码实例用到的演示图片:
1.png
以上图片是309x99,分隔为9份,每一份的长宽分别是103px和33px。
先看一段clip-path属性的代码实例:
[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
div{
  width:309px;
  height:99px;
  background-image:url(demo/CSS/img/mybg.png); 
  -webkit-clip-path:inset(0px 206px 66px 0px); 
  clip-path:inset(0px 206px 66px 0px); 
}
</style>
</head>
<body>
<div></div>
</body>
</html>

上面的代码实现矩形裁切功能,和clip属性的rect()类似,四个参数分别标识top、right、bottom和left。
但是区别还是有的,下面做一下介绍:
(1).inset()中的参数不能够以逗号分隔。
(2).切割的方式是有区别的:
clip切割方式如下:
2.png
白色的是裁切后可见的区域(裁切坐标重合的区域),灰色的是被才切掉的区域。
clip-path切割方式如下:
3.png
是不是切割方式与clip的区别就很明显了。
clip-path属性语法结构:
[CSS] 纯文本查看 复制代码
clip-path: <clip-source> | [ <basic-shape> || <geometry-box> ] | none

参数解析:
(1).clip-source:可以是内、外部的SVG的<clipPath>元素的URL引用。
(2).basic-shape:使用一些基本的形状函数创建的一个形状,包括circle()、ellipse()、inset()和polygon()。
(3).geometry-box: 可选参数,basic-shape一起使用时,可以为basic-shape的裁剪工作提供参考盒子。如果此属性没有规定,默认值分两种情况,如果裁切的元素svg元素,那么默认值是fill-box,如果裁切元素是HTML元素,那么默认值是border-box。
关于SVG的裁切可以参阅SVG <clipPath>裁切路径一章节。
代码实例:
[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
svg {
  border: 1px solid red;
  width:800px;
  height:650px;
}
circle {
  -webkit-clip-path:url(#clipPath); 
  clip-path:url(#clipPath); 
}
</style>
</head>
<body>
  <svg>
    <defs>
      <clipPath id="clipPath">
        <rect
              x="15" y="15"
              width="100" height="100"/>
      </clipPath>
    </defs>
 
    <circle
            cx="150" cy="150"
            r="100"
            fill="red"/>
 
    <rect x="15" y="15"
          width="100" height="100"
          fill="blue"
          fill-opacity="0.1"
           />
  </svg>                         
</body>
</html>

上面的代码是引用的内部的<clipPath>元素规定的裁切效果。
当然也可以是外部的SVG文件中的<clipPath>元素,引用方式原理是一样的,如下:
[CSS] 纯文本查看 复制代码
circle {
  -webkit-clip-path:url(ant.svg#clipPath); 
  clip-path:url(ant.svg#clipPath); 
}

clip-path属性即可以用于HTML元素,也可以用于SVG元素,上面就是一个典型的演示。
关于哪些css属性可以应用SVG元素,可以参阅css设置svg元素的样式一章节。
[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
div{
  width:309px;
  height:99px;
  background-image:url(img/mybg.png); 
  -webkit-clip-path:polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); 
  clip-path:polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); 
}
</style>
</head>
<body>
<div></div>
</body>
</html>

上面的代码演示了polygon()的使用,用逗号分隔的每一对数据都是一个坐标点;当然参数也可以不是百分比。
关于circle()和ellipse()用法不具体演示了,看如下代码片段:
[CSS] 纯文本查看 复制代码
/* 圆形 */
clip-path: circle(30px at 35px 35px);
/* 椭圆 */
clip-path: ellipse(65px 30px at 125px 40px);

at前面的规定的是半径,后面规定的是圆心坐标。
geometry-box:
basic-shape一起使用时,可以为basic-shape的裁剪工作提供参考盒子。
如果裁切HTML元素,可以是如下值:
(1).margin-box
(2).border-box
(3).padding-box
(4).content-box
图示如下:
5.jpg
[CSS] 纯文本查看 复制代码
.ant {
    clip-path: polygon(10% 20%, 20% 30%, 50% 80%) margin-box;
    margin: 10%;
}

在上面的代码片段中,元素margin-box作为参考,来决定裁剪点的实际位置。
点(10%,10%)是margin-box左上角,所以clip-path的定位会根据此点进行计算。
如果是裁切SVG元素,可以是如下值:
(1).fill-box:使用对像的边缘做为参考盒子。
(2).stroke-box:使用路径做为参考盒子
(3).view-box:如果没有指定viewBox将使用最近的SVG视窗做为参考盒子。如果viewBox的确创建了,则会根据viewBox的原点坐标和维度来创建参考盒子。关于视窗和viewBox可以参阅以下两篇文章:
(1).视窗可以参阅SVG viewport视窗和画布一章节。
(2).viewBox可以参阅SVG viewbox和preserveAspectRatio详解一章节。
发表于 2017-1-4 09:33:46 | 显示全部楼层
这么好的属性,都是因为兼容性得不到广泛应用

发表回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复返回顶部 返回列表