CSS: clip-path绘制图形,学不会我退出前端圈!-Qui-Note

刚看到clip-path的时候发现画图形的方法和svg的写法好像啊,例如:

clip-path画椭圆

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

SVG画椭圆

<ellipse cx="300" cy="350" rx="200" ry="50" fill="green" />

CSS: clip-path绘制图形,学不会我退出前端圈!-Qui-Note

区别就是svg是html的写法,clip-path是css的写法!它们的api用法是类似的,更多svg绘图可以参考:

clip-path介绍:

MDN:CSS 属性使用裁剪方式创建元素的可显示区域,区域内的部分显示,区域外的隐藏。
W3C:clip-path 属性使您可以将元素裁剪为基本形状或 SVG 源。clip-path 将替代废弃的 clip 属性。
七娃:类似PS的剪切蒙版,蒙版内的显示,蒙版外的隐藏!知道这个这,接下来就好理解了。

clip-path用法:

clip-path: clip-source|basic-shape|margin-box|border-box|padding-box|content-box|fill-box|stroke-box|view-box|none;

  • clip-source            SVG的URL。
  • basic-shape          绘制圆、椭圆、多边形或星形等剪切蒙版。
  • margin-box           使用 margin box 作为蒙版框。
  • border-box           使用 border box 作为蒙版框。
  • padding-box         使用 padding box 作为蒙版框。
  • content-box          使用 content box 作为蒙版框。
  • fill-box                 利用对象边界框(object bounding box)作为蒙版框。
  • stroke-box            使用笔触边界框(stroke bounding box)作为蒙版框。
  • view-box              使用 SVG 视口作为蒙版框。
  • none                    默认值。不创建的剪切路径。

注意:clip-path允许2个值,例如:clip-path: padding-box circle(50px at 0 100px)——从padding区域开始蒙版

兼容低版本浏览器写法:-webkit-clip-path。

案例——在线预览:https://course.51qux.com/clip-path

.inset img{ /*矩形*/
	clip-path: inset(100px 100px)
}
.inset1 img{ /*圆角矩*/
	clip-path: inset(100px 100px round 10px)
}
.circle img{ /*圆形*/
	clip-path: circle(50%);
}
.ellipse img{ /*椭圆形*/
	clip-path: ellipse(45% 30% at 50% 50%);
}
.polygon img{ /*三角形*/
	clip-path: polygon(50% 0,100% 50%,0 100%);
}
.polygon1 img{ /*菱形*/
	clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.polygon2 img{ /*正方形*/
	clip-path: polygon(0% 0%, 0% 200px,200px 200px,200px 0%);
}
.polygon3 img{ /*正五边形*/
	clip-path: polygon(0% 38.31%, 50% 0%,100% 38.31%,80.86% 100%,19.14% 100%);
}
.polygon4 img{ /*正六边形*/
	clip-path:polygon(25% 0%, 75% 0%,100% 50%,75% 100%,25% 100%,0% 50%)
}

效果:

CSS: clip-path绘制图形,学不会我退出前端圈!-Qui-Note

clip-path兼容性

CSS: clip-path绘制图形,学不会我退出前端圈!-Qui-Note

clip-path的浏览器的支持率不是太乐观,ie/opera/uc全挂了,对不同的属性兼容性也不一样,例如使用svg路径支持率在95%,使用shape形状支持率在94%;fill-box和stroke-box支持率才3.5%,少得可怜!

所以,对于用到这个属性的朋友,一定要多尝试几个浏览器,实在不行了,无非一张png图片的事!