clip 和 clip

2018-06-19 18:28 更新

一、Clip

CSS的clip属性并不是CSS3的新属性，而是在CSS2中已经存在了，不过在实际开发中，这个属性的使用率比较低，我之前也是瞄过这个名称，最近看过一个网站的加载动画，才知道其的强大。

下面就一起来学学吧！

Clip属性在W3C官网是这样进行描述的：“通过对元素进行剪切来控制元素的可显示区域，默认情况下，元素是不进行任何剪切的，但是也有可能剪切区域也显示的设置了clip属性”。

语法：

clip:<shape> | auto | inherit;

注意：clip属性只能在元素设置了“ position:absolute ”或者“ position:fixed ”属性起作用；如果先有" overflow:visible "，clip属性不起作用。

属性值说明：

<shape>：shape是一个函数功能，当前只支持 rect (top, right, bottom, left) 属性。
auto：这是一个默认值，表示不进行剪切。
inherit：继承父元素的clip属性。

Rect()使用详解

rect有四个值，顺序和margin、padding以及border具有一样的标准，分别是：top,right,bottom,left

clip:rect (top, right, bottom, left)

在这里要提醒一句，rect()属性的top和bottom指定的偏移量是从元素盒子顶部边缘算起的；left和right指定的偏移量是从元素盒子左边边缘算起的，看下图：

简单例子：

.clip{   
  position:absolute;   
  clip:rect(30px,200px,150px,50px);   
}

效果如下：

左侧是原图，右侧是剪切后的图，是不是很神奇咧！

接下来利用clip这个属性来制作一个圆形加载动画：

到这里，clip属性已经介绍完了，请尽情发挥你的想象力，制作出酷炫的效果。

二、clip-path

clip-path是CSS3中的属性，比旧版本的clip更加强大，但它的缺点就是兼容性，ie是完全不支持的，而webkit内核的浏览器，需要加上内核前缀-webkit-

语法：

clip:<clip-source> | [<basic-shape> || <geometry-box> ] | none;

默认值是none。

属性值说明：

clip-source：可以是内、外部的SVG的 <clipPath> 元素的url引用
basic-shape：使用基本的形状函数创建的图形形状，如：circle()、ellipse()、inset() 和 polygon()

如果你熟悉svg，那你对下面的属性应该会有一些熟悉。

1.多边形polygon

语法：

clip-path:polygon(x y,x1 y1....,xn yn)

x y ：第一个点的x轴值和y轴值，以此类推，xn yn表示第n个点的x轴和y轴值；值可以是百分比或像素值。

2.圆形circle

语法：

clip-path:circle( r at x y)

r表示圆的半径
x y：原点位置

3.椭圆ellipse

语法：

clip-path:ellipse( r1 r2 at x y)

r1：水平半径
r2：垂直半径
x y：圆心位置

4.inset

语法：

clip-path: inset(top right bottom left round top-radius right-radius bottom-radius left-radius)

简单例子：

.polygon{   
  -webkit-clip-path:polygon(0 100%, 50% 0, 100% 100%);   
}   
.circle{   
  -webkit-clip-path: circle(20% at 50% 50%);   
}   
.ellipse{   
  -webkit-clip-path: ellipse(30% 20% at 50% 50%);   
}   
.inset{   
  -webkit-clip-path: inset(25% 0 round 0 25%);   
}

效果如下：

外国神器：http://bennettfeely.com/clippy/

到这里，并没有完，更加酷炫的效果，当然是配合上svg

.text {   
  -webkit-clip-path: url(#svgTextPath);   
  clip-path: url(#svgTextPath);
			}

svg：

<svg height="0" width="0">   
  <defs>   
    <clipPath id="svgTextPath">   
      <text x="10" y="250" textLength="200px" lengthAdjust="spacing" font-family="Vollkorn" font-size="50px" font-weight="700" font-style="italic"> 酷炫 </text>   
    </clipPath>   
  </defs>   
</svg>

效果如下：

后续学习会继续添加资料，如果您有更好的资料，欢迎在评论区提供！

以上内容是否对您有帮助：

← ::selection

必须了解的CSS函数 →

写笔记

我要补充