背景上半年写了很多文章，心好痛。我真的很忙。我最近也在处理性能相关的事情。这个月结束后，我就差不多可以决定了。到时候给大家解释一下。最近没有做系统的总结。为了保持手感，今天写一个业务时用到的css属性：clip-path。Misstextdemanddesign画了一个标签：从原来的空心设计（也就是只有边框的那种）改成了实心的。原来镂空的实现方法是：一个矩形，然后用before和after做两条线作为头部，做一个label即可。现在要把它做成实心的，用最少的修改，达到这个效果，怎么做呢？瞬间脑海里闪过几个实现方法，比如：在矩形旁边加一个三角形，用两个白色的三角形遮住背景。最先想到的是前两种裁剪的方法，但是经过一番脑洞大开，觉得很麻烦啊，一行代码就能搞定就好了，clip-path可以满足这个想法.我也简单实现了一下：代码：clip-path:polygon(00,70%0,100%50%,70%100%,0100%);每个点代表一个坐标，只要在切割中设置坐标点，就可以得到我们想要的形状。例如：几个属性有四个属性值：clip-source：URL引用，可以是内部或外部SVG的clipPath元素；基本形状：使用一些基本形状函数创建的形状。主要包括：circle()ellipse()inset()polygon()geometry-box：为可选参数。该参数与basic-shape函数一起使用时，可以为basic-shape裁剪提供一个参考框。如果geometry-box是自己指定的，那么它使用指定的框形状作为裁剪路径，包括任何角形状（由border-radius提供）。更详细的介绍可以参考MDN：https://developer.mozilla.org...最终效果兼容性IE和Edge不支持该属性，Firefox仅部分支持clip-path。Chrome、Safari和Opera需要-webkit-前缀来支持此属性。结论最终一行代码就实现了设计的效果，省时省力。最后，我想和大家简单谈谈学习。是我在大学听的一个分享。通常，你需要不断学习，并将其内化到自己的知识体系中。一个非常有效的方法是：实际使用它，而不是仅仅停留在知道的层面上，GetYousHandsDirty。如果一开始不知道clip-path这个属性，大概直接画个三角形就可以实现了。以上就是全部内容，希望对你有所启发。关注我如果你觉得这篇内容对你很有启发，那就关注我吧~更多精彩：聊一聊ESM、Bundleless、Vite、Snowpack记得一个“无限列表”滚动优化“面试三招”代码分割（上）Cache的”面试三招”（上）“面试三招”的缓存（下）“面试三招”的HTTP（上）“面试三招”的HTTP（下）“面试三招”的this
