CSS clip-path妙用

clip-path

1.含义?

clip-path是对CSS属性clip的升级。作用是==对元素进行裁剪==。利用裁剪这个特性,可以用来设计一些很炫的动画。

2.clip-path分类

basic-shape基本图形,包括inset,circle,eclipse,polygon

clip-source:通过url方法引入一段SVG的作为裁剪路径。

3.Basic shape

一、Inset

矩形,不是rec

inset() 用于**定义一个插进的矩形**,即被剪裁元素内部的一块矩形区域。

参数类型:inset( {1,4} [round ]? )

其中 shape-arg 分别为矩形的上右下左顶点到被剪裁元素边缘的距离(和marginpadding参数类似),border-radius 为可选参数,用于定义 border 的圆角。

例如:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 500px;
            height: 500px;
            background-color: skyblue;
        }
        .box:hover{
            clip-path: inset(100px 100px 100px 100px round 20px);
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

二、circle

circle() 用于定义一个圆。

参数类型:circle( []? [at ]? )

其中 shape-radius 为圆形的半径,position 为圆心的位置。

如果 shape-radius 为百分比,则 100% 相当于:

sqrt(width^2+height^2)/sqrt(2)

widthheight分别为被剪裁元素的宽高。

三、Ellipse

ellipse() 用于定义一个椭圆。

参数类型:ellipse( [{2}]? [at ]? )

其中 shape-radius 为椭圆x、y轴的半径,position 为椭圆中心的位置。

四.、Polygon

polygon() 用于定义一个多边形。

参数类型:polygon( [,]? [ ]# )

其中 fill-rule 为填充规则,即通过一系列点去定义多边形的边界。

4、clip-source

html:

<svg>
  <defs>
    <clipPath id="svgCircle">
      <circle cx="500" cy="500" r="400" />
    </clipPath>
  </defs>
</svg>

<img class="img svg-circle" src="http://source.unsplash.com/random/1000x1000" />

css:

.svg-circle {
  clip-path: url("#svgCircle");
}

你可能感兴趣的:(css,前端,css,javascript,前端)